solidjs / solidjs/solid-vite-plugin
Library cannot resolve `Context` when using `index.tsx`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 520
- Forks
- 70
- Avg merge
- 23h 35m
- Merged PRs (30d)
- 39
Description
Good Evening!
Hope you are having a wonderful holiday! I am the maintainer of the TanStack solid-query package and we are running into a peculiar issue that I am not really sure if this is a vite-plugin-solid issue or maybe something with the vite resolver itself.
Overview
Recently, We moved solid-query to follow the patterns set up by Solid Lib Starter where the root of the library is exported by an index.tsx file. Previously we were using index.ts to export all our internal modules
For solid-query to work, it needs a Context Provider at the top level to share the query cache to its component subtree. The implementation detail of which doesn't matter. I have created a very simple reproduction that removes all external dependencies to make it easy to pinpoint the issue.
Example 1 (Reproduction)
Here is a small example library that simulates the issue.
https://github.com/ardeora/solid-lib-starter/tree/cc4fa3ce988b74ad9fe6d791fd3bcedb9ded98f3
Directory structure
src
├── queryClient.ts
├── QueryClientProvider.tsx
├── createQuery.ts
└── index.tsx
queryClient.tscontains aclasswhich contains a counter.queryClientProvider.tscontains two functionsQueryClientProviderthat will be used to provide an instance ofQueryClientto the component subtree using aContextuseQueryClientthat will consume the context and return the instance ofQueryClient
createQuery.tshas a primitive that will internally consume the client usinguseQueryClientand spit out the countindex.tsxjust reexports all the functions/components above
If we use this library in dev mode with vite. It causes an error
Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient (QueryClientProvider.jsx:7:15)
at createQuery (createQuery.js?v=9181a141:4:25)
at App (index.tsx:11:17)
at chunk-ECDBB74H.js?v=9181a141:557:12
at untrack (chunk-ECDBB74H.js?v=9181a141:448:12)
at Object.fn (chunk-ECDBB74H.js?v=9181a141:553:37)
at runComputation (chunk-ECDBB74H.js?v=9181a141:755:22)
at updateComputation (chunk-ECDBB74H.js?v=9181a141:738:3)
at devComponent (chunk-ECDBB74H.js?v=9181a141:564:3)
at createComponent (chunk-ECDBB74H.js?v=9181a141:1330:10)
Live Preview of the issue mentioned above
Example 2 (Reproduction)
The second example is the exact same thing. EXCEPT, index.tsx is changed to index.ts
https://github.com/ardeora/solid-lib-starter/tree/main/src
And now the library works as expected
Live Preview of the working version
Is this behavior expected? What is the reason index.tsx doesn't work but index.ts works here? What is the convention you recommend we follow for future versions of SolidJS libraries going forward?
Referencing the solid-query issue here as well https://github.com/TanStack/query/issues/4673
Thanks a lot in advance!
Aryan
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked solid-lib-starter reproduction at commit cc4fa3ce988b74ad9fe6d791fd3bcedb9ded98f3 and its StackBlitz preview. Compare the failing index.tsx export with the working index.ts version, then inspect the vite-plugin-solid and Vite resolver behavior involved. Done means identifying the cause, determining whether the behavior is expected, and documenting the recommended library convention or required fix.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100