New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Migrating to V4 - React Query Devtools module parse failed #4396
Comments
show a runnable reproduction please. There were many issues already (search the closed issues!) and all were related to bundlers doing something wrong. Please also use the latest version of react-query |
@TkDodo I guess it might be connected with the fact that |
true - we are not using a fixed version dependency:
so are you saying this is an upstream issue with react-table 😅 ? |
I've added link to Codesandbox but it works. I think it is problem in my webpack.config.js (see in codesandbox) |
@DamianOsipiuk I use webpack |
here we go again 😆. Can we reproduce the setup we have in query? |
When I am using
It displays other error but it also relates to
|
Yes i think we should be able to. Unless there are some quirks that we do not know of. |
The same issue is in #4278 |
I am completely new to React Query, trying to add it to my project, and having the same issue as @TommyNT with 4.13.4 and 4.13.5. It seems React Query 3 works just fine with the devtools, and React Query 4.x works fine without it. |
Hi, |
I also had this issue when migrating from v3 => v4. This issue is for webpack 4 environments I think, which use acorn 6, and doesn't support nullish coalescing yet. I had the exact same error as the original author - if you look at the error message @TommyNT you'll see the place of code referenced: options.threshold = options.threshold ?? rankings.MATCHES If I just replace the
"resolutions": {
"acorn": "npm:acorn-with-stage3"
} EDIT ^ don't actually recommend this, it led to other issues in my setup/ other people as well. Instead, you could try running the match-sorter-utils library through babel with some config like: test: /\.js$/,
include: /node_modules\/@tanstack\/match-sorter-utils/,
use: ['babel-loader'], And make sure to use the |
Just noting, I actually had other issues related to upgrading acorn (which I'm pretty confused about) so I ended up just targeting match-sorter-utils to be run through our webpack babel-loader. Something like test: /\.js$/,
include: /node_modules\/@tanstack\/match-sorter-utils/,
use: ['babel-loader'], And then make sure to include |
@peterkrieg Thanks for this! I ran into this same issue when trying to install and use downshift. Your solution worked a treat :) Just to add that, after changing my config, I needed to delete my |
Hmm, might have spoken too soon - that
Maybe I'll try upgrading to Webpack 5 and hope that fixes the issue. Edit: Using this instead seems to have got React Styleguidist working too:
|
@peterkrieg thank you! This solution works |
Hey @globalmatt yeah I think that original solution was flawed, perhaps webpack 4 isn't compatible with updated acorn after all. I edited my original comment to instead recommend parsing the I do wonder if there's a bit of a mismatch in js target version here - the rest of react-query code gets converted to older version of JS features (aka, nulllish coalescing will get converted out for example). I feel like to keep consistent with rest of library the I tried looking through the rollup config but couldn't find exactly where that config was being set in either |
Lines 117 to 129 in 667efe3
Again, this is an upstream issue. I don't see much action going on over in the table repo, so the 3 possible solutions are to me:
Thoughts @DamianOsipiuk ? |
I found a couple of issues opened in the
I think we would only need to remove
It needs to be deployed as a separate package, cause both
I do not see any changes related to this after 8.1.1. Are you sure this will help? If it works, this could be a temporary fix until the problem will be fixed in |
maybe, but then they wouldn't support ESM. I think the proper fix would be to add
8.5.14 is the latest release, and things definitely worked some time ago. There is no other release between 8.5.14. and 8.1.1 so my guess is that is the culprit. |
@TommyNT @peterkrieg @globalmatt @Bre77
thanks |
@TkDodo that fixed it for me, thank you! |
Describe the bug
I have migrated to React Query V4. When I include
@tanstack/react-query-devtools
it displays error like below:Your minimal, reproducible example
https://codesandbox.io/s/dry-lake-cyly62?file=/src/App.js
Steps to reproduce
In package.json:
In webpack.config.js:
Expected behavior
I expect to display React Query Devtools, but it displays error. When I'm not including devtools it works fine.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
react-query version
4.3.3
TypeScript version
No response
Additional context
No response
The text was updated successfully, but these errors were encountered: