[solid-query] Uncaught (in promise) Error: experimental_prefetchInRender feature flag is not enabled
Describe the bug
When using the latest version of tanstack-query you get at least in solidjs for each query this error message in the console:
Uncaught (in promise) Error: experimental_prefetchInRender feature flag is not enabled
Your minimal, reproducible example
https://codesandbox.io/p/github/BierDav/temp-tanstack-query-ssr-bug/experimental-flag-warning
Steps to reproduce
- Just start it using
bun i && bun dev
Expected behavior
No error message in the console, because the promise wasn't even accessed
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: Windows, Linux
Tanstack Query adapter
solid-query
TanStack Query version
v5.59.13
TypeScript version
No response
Additional context
I have looked into the code. It is not really that something went wrong, and more about that the promise which causes this issue is evaluated even though the feature is not set.
Probably the easiest solution is to replace the promise when the flag is not enable with a getter function which then only throws the error, when the promise is really accessed.
Note: i can’t access your sandbox - it’s likely set to private.
I see no error in the Solid Query Simple example:
https://stackblitz.com/github/tanstack/query/tree/main/examples/solid/simple?embed=1&theme=dark&preset=node&file=src/index.tsx
we see this issue too in our setup. (solid-start, without bun)
@TkDodo the url in example is pasted 2 times. just copy one of the halves. opens fine here
StackBlitz link for the same repo: https://stackblitz.com/~/github.com/BierDav/temp-tanstack-query-ssr-bug After waiting for the dev server to start, I had to click on "http://localhost:3000/" in the terminal. Then I see JSON in the preview and the error in browser console.
I'm also experiencing the experimental_prefetchInRender feature flag error in my SolidJS project.
we see this issue too in our setup. (solid-start, without bun)
@TkDodo the url in example is pasted 2 times. just copy one of the halves. opens fine here
sorry for that i fixed it
having the same issue, this seems to be happening since 5.59.0
Can confirm, rolling back to 5.56.2 does not present this. Even in the docs own example this issue is present https://tanstack.com/query/latest/docs/framework/solid/examples/solid-start-streaming ; to see it happening go to the "mixed" page for example and reload, issue appears in the console
@YosefBayoude I rolled back to 5.45.0 which doesn't have this issue
codesandobx still doesn’t work for me, but stackblitz does: https://stackblitz.com/github/BierDav/temp-tanstack-query-ssr-bug/tree/experimental-flag-warning
@KATT this promise rejection shows up in the solid-js adapter:
https://github.com/TanStack/query/blob/5d69ad773a7a2df632df48eefce6fd9772d26db7/packages/query-core/src/queryObserver.ts#L89-L93
Not sure why it works for react though 🤔
Is there a better place where we can reject the promise - or should we do it at all?
@TkDodo have the same issue in React (
This is odd, we add a .catch(() => to prevent this:
https://github.com/TanStack/query/blob/06e315c9ff413fb2d91b1f565bf5bfc9437c26ed/packages/query-core/src/thenable.ts#L52-L54
Can this be a Vite-thing or something? 🤔
@vlad99902 I haven’t seen this in react so far - can you make a reproduction for that please?
This issue doesn't affect react
Unfortunately it does, i'm seeing it in react.
This issue doesn't affect react
do you have a reproduction?
any update on this one ?
Are there any downsides to enabling experimental_prefetchInRender flag for affected queries?
UPD: oh, right… some of the server-side renderings just hang forever this way. seems to be related to enabled: with reactive value
seeing this with @tanstack/solid-query, but that probably uses the core.
Considering how Solid Query works, I assume the issue is that it fetches data as soon as the page loads, and something is not functioning as expected.
In your code, there is nothing preventing the component from rendering, such as a condition with a Show component, and you are not using the enabled key either. As a result, the app makes a call right at startup, which likely isn't working.
This issue is common, especially when the query relies on a specific prop that you assume is always available. You need to inform Solid Query that the query is "enabled" only when that specific prop is true.
I hope this makes sense. Let me know.
Hey folks, I was also able to reproduce this issue running version 5.59.20 on a NextJS app. For me, turning on automatic fetching via enabled:true seems to have solved it - although it certainly required some refactor, I thought it was worth it to ensure we're on a recent-ish version
on a NextJS app.
I thought that this issue is solid-js specific. But it's interesting that it's reproducible to some degree on react 🤔
I haven’t seen this in react so far - can you make a reproduction for that please?
This still stands - please provide a reproduction in React 🙏
I've caught this bug with React 19 using react-native 0.79+. Such method call triggered this error:
const result = observer.getOptimisticResult(defaultedOptions);
I’ve run into this bug with React 19 and Next 15. I set experimental_prefetchInRender: true on the QueryClient initializer. Should I be worried?
@KATT could we, instead of rejecting the promise outright just initialize with a pending promise and use our property tracking to throw an error when promise is used without the experimental flag?
please try out the preview build of this PR and let me know if that fixes the issue for you:
- https://github.com/TanStack/query/pull/9576
npm i https://pkg.pr.new/@tanstack/react-query@9576
Thanks 🙏
@TkDodo Seems solved for solid-query at least 👏