Where Do I Put Providers In SolidStart?

In a SolidJS project you name your providers in index.tsx by wrapping the <App /> component. render(() => ( <Router> <FirebaseAuthProvider> <App /> </FirebaseAuthProvider> </Router>), root!); How would I do the same thing in SolidStart? Thanks, Chris
4 Replies
lxsmnsyc
lxsmnsyc14mo ago
at the root.tsx file
ChrisThornham
ChrisThornhamOP14mo ago
I've tried every configuration I can imagine and I can't get it to work. Would you mind showing me a code snippet?
lxsmnsyc
lxsmnsyc14mo ago
I mean in the root.tsx where the html markup resides, you can ideally add the provider you want there
export default function Root() {
return (
<Html lang="en">
<Head>
<Title>SolidStart - Bare</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Body>
<MyProvider>
<Suspense>
<ErrorBoundary>
<A href="/">Index</A>
<A href="/about">About</A>
<Routes>
<FileRoutes />
</Routes>
</ErrorBoundary>
</Suspense>
</MyProvider>
<Scripts />
</Body>
</Html>
);
}
export default function Root() {
return (
<Html lang="en">
<Head>
<Title>SolidStart - Bare</Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Body>
<MyProvider>
<Suspense>
<ErrorBoundary>
<A href="/">Index</A>
<A href="/about">About</A>
<Routes>
<FileRoutes />
</Routes>
</ErrorBoundary>
</Suspense>
</MyProvider>
<Scripts />
</Body>
</Html>
);
}
ChrisThornham
ChrisThornhamOP14mo ago
Ok. Thank you. Let me experiment with this. I'll see if I can get it working. You are a savior! Thanks again. I tried 15 combinations that looked similar to your example but none of them worked. You nailed it.
Want results from more Discord servers?
Add your server