solidjs / solidjs/solid-vite-plugin

Library cannot resolve `Context` when using `index.tsx`

Aperta
#80 0 commenti 6 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
520
Fork
70
Merge medio
23h 35m
PR unite (30g)
39

Descrizione

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
  1. queryClient.ts contains a class which contains a counter.
  2. queryClientProvider.ts contains two functions
    • QueryClientProvider that will be used to provide an instance of QueryClient to the component subtree using a Context
    • useQueryClient that will consume the context and return the instance of QueryClient
  3. createQuery.ts has a primitive that will internally consume the client using useQueryClient and spit out the count
  4. index.tsx just 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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con la riproduzione collegata di solid-lib-starter al commit cc4fa3ce988b74ad9fe6d791fd3bcedb9ded98f3 e la relativa anteprima StackBlitz. Confronta l’export di index.tsx che non funziona con la versione funzionante di index.ts, quindi analizza il comportamento di vite-plugin-solid e del resolver di Vite coinvolto. Il lavoro è completato quando la causa è stata identificata, è stato determinato se il comportamento è previsto ed è stata documentata la convenzione consigliata per la libreria o il fix necessario.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
build-system, tooling
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.