Webpack build issue v4.3.4

[parkm]

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-64
Can't import the named export 'unstable_batchedUpdates' from non EcmaScript module (only default export is available)
 @ ./node_modules/@tanstack/react-query/build/lib/setBatchUpdatesFn.js
 @ ./node_modules/@tanstack/react-query/build/lib/index.js
 @ ./src/root.component.js
 @ ./src/communications-ui.js

This does not happen on v4.3.3, any ideas what happened here?

Your minimal, reproducible example

n/a

Steps to reproduce

Build app with webpack on v4.3.4

Expected behavior

I should not get import errors when building with webpack

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

MacOS v11.6.5
Webpack v4.41.6

react-query version

4.3.4

TypeScript version

No response

Additional context

No response

[parkm]

It looks like this commit might have introduced the problem c5d8582

[TkDodo]

yes, we're aware of this by now, but it's good we are tracking it as an issue now. According to this stackoverflow answer, the bundler picks up .mjs files but doesn't understand ESM.

If you are using raw webpack, this config seems to do the trick:

rules: [
  {
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  }
]

if you are using CRA v4, the best course of action is to upgrade to V5, or downgrade RQ until we have a fix. We had it working for CRA v4 in the beta but I think, as you've correctly pointed out, in an attempt to fix react-native support, this issue was somehow introduced.

[nosovsh]

Thanks @TkDodo

To summarize the quick fix:
if you cannot upgrade CRA to v5 do this:
npm i @tanstack/react-query@4.3.3 --save

and fix react-query version in your package.json (remove ^)

[TkDodo]

yes, you can fix your version to 4.3.3 (which has problems for react-native, but that's probably not what's troubling you :) )

[TkDodo]

@parkm @nosovsh can you please check with the preview build from the PR?

"@tanstack/react-query": "https://pkg.csb.dev/TanStack/query/commit/fd83a352/@tanstack/react-query",

thanks.

[parkm]

That's working for me, thanks @TkDodo !