rare-sapphire

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

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?

16 Replies

eager-peach•11mo ago

https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#private-class-fields-and-methods You likely need to make sure you bundle with at least ECMAScript 2022

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

rare-sapphireOP•11mo ago

Thanks for the reply @troywoy . I have @babel/preset-env@7.16.11 setup. Because I haven't declared a browserslist anywhere it should be defaulting to the oldest browsers and transpiling anything newer than ES2015, right? Or am I getting this backwards?

eager-peach•11mo ago

Not sure, Vite ruined everything I remember about Webpack I know in my setup I had to add target: 'es2022' in my vite configs in order for top level await to work

rare-sapphireOP•11mo ago

I wish I could be in that position, haha. This application is too big, I'll need to convince leadership to invest at least a couple quarters to a migration 😿

eager-peach•11mo ago

https://webpack.js.org/blog/2020-10-10-webpack-5-release/#major-changes-development-experience

webpack

Webpack 5 release (2020-10-10) | webpack

eager-peach•11mo ago

target: ["web", "es2022"]

rare-sapphireOP•11mo ago

Unfortunately, still on webpack 4, and I'd rather put energy into Vite than upgrading Webpack. Here's another error raised during the build

frontend-1      | ERROR in ../node_modules/@tanstack/query-core/build/legacy/queriesObserver.js 116:85
frontend-1      | Module parse failed: Unexpected token (116:85)
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      | |       result,
frontend-1      | |       (r) => {
frontend-1      | >         return __privateMethod(this, _combineResult, combineResult_fn).call(this, r ?? result, combine);
frontend-1      | |       },
frontend-1      | |       () => {
frontend-1      |  @ ../node_modules/@tanstack/query-core/build/legacy/index.js 8:0-55 34:0-60:2
frontend-1      |  @ ../node_modules/@tanstack/react-query/build/legacy/index.js
frontend-1      |  @ ../frontend/services/pacClassicTransaction.ts
frontend-1      |  @ ../frontend/pages/pac/transactions/pacTransaction.tsx
frontend-1      |  @ ../app/static/frontend/routing/index.tsx
frontend-1      |  @ ../app/static/frontend/index.jsx
frontend-1      |  @ multi @babel/polyfill index.jsx

frontend-1      | ERROR in ../node_modules/@tanstack/query-core/build/legacy/queriesObserver.js 116:85
frontend-1      | Module parse failed: Unexpected token (116:85)
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      | |       result,
frontend-1      | |       (r) => {
frontend-1      | >         return __privateMethod(this, _combineResult, combineResult_fn).call(this, r ?? result, combine);
frontend-1      | |       },
frontend-1      | |       () => {
frontend-1      |  @ ../node_modules/@tanstack/query-core/build/legacy/index.js 8:0-55 34:0-60:2
frontend-1      |  @ ../node_modules/@tanstack/react-query/build/legacy/index.js
frontend-1      |  @ ../frontend/services/pacClassicTransaction.ts
frontend-1      |  @ ../frontend/pages/pac/transactions/pacTransaction.tsx
frontend-1      |  @ ../app/static/frontend/routing/index.tsx
frontend-1      |  @ ../app/static/frontend/index.jsx
frontend-1      |  @ multi @babel/polyfill index.jsx

React Query is certainly not our only dependency making use of nullish coalescing, so I'm wondering why it's the only one that is causing an issue for us? In fact, here's an example of its usage in v4 of React Query which is working fine for us right now. https://github.com/TanStack/query/blob/92e5672f58dec44d87f899e41d78d3582866d3f8/packages/query-core/src/queriesObserver.ts#L168

eager-peach•11mo ago

https://github.com/TanStack/query/pull/5507

GitHub

feat: Drop legacy webpack v4 support by lachlancollins · Pull Reque...

This removes the legacy .esm.js output, which was used by bundlers that didn't recognise the modern .mjs extension such as Webpack v4. If you are still using Webpack v4, you can continue to...

rare-sapphireOP•11mo ago

Ahh, painful but direct lol There's also this follow up PR linked that implies they walked that back? I wish there was a more public discussion or at least statement of intent...

rare-sapphireOP•11mo ago

https://github.com/TanStack/query/pull/5570

GitHub

feat: Add legacy rollup builds by lachlancollins · Pull Request #55...

Kind of reverts #5507. The packages that use buildConfigs (i.e. not the svelte, solid or eslint packages) will also generate a legacy output (.legacy.js and .legacy.cjs). I've checked to ma...

eager-peach•11mo ago

That PR is to an alpha branch so I don't think it ever made it into v4/v5

rare-sapphireOP•11mo ago

Ahh good spot

eager-peach•11mo ago

Maybe this can be good fuel to ignite the dependency updates/migration that your leadership needs to hear lol

rare-sapphireOP•11mo ago

True... Thank you for your help at least!

eager-peach•11mo ago

I kept looking through the Github Issues and came across this comment: https://github.com/TanStack/query/issues/4155#issuecomment-1244222558

GitHub

Webpack build issue v4.3.4 · Issue #4155 · TanStack/query

Describe the bug When running webpack webpack --config webpack.config.js I'm getting this error on v4.3.4: ERROR in ./node_modules/@tanstack/react-query/build/lib/reactBatchedUpdates.mjs 3:32-6...

eager-peach•11mo ago

This is still referring to RQ v4 though. Not sure I'd have high hopes for webpack v4

Gaming

Programming

Webpack issue upgrading React Query from v4 to v5

Did you find this page helpful?