TanStackT
TanStack•16mo ago•
20 replies
faint-white

Webpack issue upgrading React Query from v4 to v5

After upgrading @tanstack/react-query and @tanstack/react-query-devtools, Webpack (v4) fails to build my application.

frontend-1      | ERROR in ../node_modules/@tanstack/query-devtools/build/index.js 5:2
frontend-1      | Module parse failed: Unexpected character '#' (5:2)
frontend-1      | You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
frontend-1      | | // src/TanstackQueryDevtools.tsx
frontend-1      | | var TanstackQueryDevtools = class {
frontend-1      | >   #client;
frontend-1      | |   #onlineManager;
frontend-1      | |   #queryFlavor;
frontend-1      |  @ ../node_modules/@tanstack/react-query-devtools/build/legacy/ReactQueryDevtools.js 6:0-65 20:8-29
frontend-1      |  @ ../node_modules/@tanstack/react-query-devtools/build/legacy/index.js
frontend-1      |  @ ../app/static/frontend/App.jsx
frontend-1      |  @ ../app/static/frontend/routing/index.tsx
frontend-1      |  @ ../app/static/frontend/index.jsx
frontend-1      |  @ multi @babel/polyfill index.jsx

etc etc etc


It looks like Webpack is attempting to bundle the wrong build files, or else I need to configure babel to compile the newer Ecmascript syntax?
Was this page helpful?