Error in production only: <A> and 'use' router primitives can be only used inside a Route.
This is really weird one. Using vite + SolidJS on the latest versions. The error occurs only when serving a production build. Dev works fine. I've been banging my head on a wall trying to figure this out.
Any debugging ideas? It's in a very complex app so somewhat hard to debug by elimination or reproduction although I will attempt a repro today.
Possibly helpful to say production builds were working on my local machine but showed this error when deployed after being build in Docker. Seeing this, I rm -rfed node_modules and reinstalled, which made my local behavior match the deployed (showing this context error).
This has been a little demoralizing because I have no thread to pull, no way to find out what's going on here.
16 Replies
The best way to debug this is to go from the top down of where you define your routes and then where you're using the
A component or any use primitives likes useLocationThank you. Turned off minification and added sourcemaps. Looks like it's coming from the page being loaded, OverviewPage, where it calls a loader with
createAsync. That loader does not use use* router utils. The callstack shows the useNavigate coming from query. That should be fine, given that the call chain came from a route so it should have the solid router ctx, no?
line 36 is
const data = createAsync...
How is the overview page loaded?
It could be because of the preload?
Could be, let me try w/o
Does not work either way. This appears to be some greater issue with context not working.
Other routes also display the router ctx error as well as errors thrown in my own code about not receiving context..
which is odd because the setup looks fine
Clarifying - context works on fresh load but not when navigating to a page.
Any chance you have an
A or use primitive outside the router somewhere and the sourcemap is wrong?It's possible, I'll look through each of them.
Stripped everything down to just a couple blank pages & am still experiencing weird behavior although the ctx error is gone. (Route content not updating when clicking on A links, though the URL bar does). Full reload is required to show the correct route content.
This of course works normally in dev mode.
In this case, you need root on
Router I believe
and the root should render the children
root={(props) => (<> {props.children} </>)}
something along those linesI updated to solid-js 1.9.5 and the issue went away? Super bizarre. I've noticed quite a few dev vs prod behavior mismatches over the last year or two of using solid but this was def the weirdest. Thank you Reeeee for your help, I really appreciate it.