Unable to resolve unstable_batchedUpdates from react-dom

[Elementrat]

Describe the bug

Hi!

In the context of a Next 13 project, I'm able to use react-query in local dev, but production builds fail with the following error:

./node_modules/.pnpm/@tanstack+react-query@4.24.10_biqbaboplfbrettd7655fr4n2y/node_modules/@tanstack/react-query/build/lib/reactBatchedUpdates.mjs Attempted import error: 'unstable_batchedUpdates' is not exported from 'react-dom' (imported as 'ReactDOM').

Dependencies:
"dependencies": { "@apollo/client": "3.7.8", "@apollo/server": "4.4.0", "@as-integrations/next": "1.2.0", "@graphql-tools/schema": "9.0.16", "@heroicons/react": "1.0.6", "@tailwindcss/forms": "0.5.3", "@tailwindcss/line-clamp": "0.4.2", "@tanstack/query-core": "4.24.10", "@tanstack/react-query": "4.24.10", "axios": "1.3.3", "clsx": "1.2.1", "date-fns": "2.29.3", "dinero.js": "2.0.0-alpha.8", "graphql": "16.6.0", "graphql-request": "5.1.0", "graphql-tag": "2.12.6", "graphql-tools": "8.3.18", "jotai": "2.0.2", "jotai-tanstack-query": "0.5.0", "mongodb": "5.0.1", "ms": "3.0.0-canary.1", "next": "13.1.7-canary.21", "react": "18.2.0", "react-dom": "18.2.0", "styled-components": "6.0.0-beta.2", "swr": "2.0.3", "use-count-up": "3.0.1" },

Curious whether this is a known issue...

Your minimal, reproducible example

N/A - only build step fails

Steps to reproduce

pnpm run build

Expected behavior

Build completes successfully

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Mac OS

TanStack Query version

"@tanstack/query-core": "4.24.10", "@tanstack/react-query": "4.24.10",

TypeScript version

No response

Additional context

No response

[TkDodo]

unstable_batchedUpdates should exist in ReactDOM. Please provide a reproduction

[Elementrat]

https://github.com/Elementrat/hwatu

pnpm i pnpm build

[TkDodo]

okay yeah this is a reproduction, but it's far from minimal. I don't know of if it's app directory related, or if any of the other dependencies have something to do with it. Please try to narrow it down.

I pretty much deleted everything except one page and the Providers where we add a QueryClientProvider and now the build works: https://codesandbox.io/p/sandbox/staging-architecture-hsju41

so you can either add more things to my repro until it breaks or remove stuff from yours until it works

[mmahalwy]

Running into the same problem. Dont have a repro yet. FWIW @TkDodo you have next version 13.1 in your sandbox. Not sure if 13.2 makes a difference here

[mmahalwy]

Ok was able to dig into this more and seems like Nextjs changes what ReactDOM exports on server side? Not sure, but after a few console logs, I cannot get unstable_batchedUpdates as an export on server side.

[AdrianMachado]

Following along with this issue. I encountered this as well, when I spotted this comment. I moved my <QueryProvider> to a lower level of my app that I knew wasn't using the edge runtime and it started working again. Perhaps their edge runtime has an outdated library for react-dom?

[hansottowirtz]

This is a partly related Next.js issue: vercel/next.js#43690

[TkDodo]

I don't see any relation to react-query here. The minimal reproduction I provided works, so if someone wants to work from that to show that it doesn't work in a minimal way with react-query, we can re-open this.

[mrzachnugent]

@TkDodo
Here is a minimal reproduction where we get the error: https://codesandbox.io/p/sandbox/quizzical-sinoussi-efxh45?file=%2Fapp%2Fpage.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A6%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A6%7D%5D

[TkDodo]

@mrzachnugent it works if I remove the following line:

export const runtime = 'experimental-edge';

To me, this looks like a nextJs problem.

[mrzachnugent]

@mrzachnugent it works if I remove the following line:

export const runtime = 'experimental-edge';

To me, this looks like a nextJs problem.

Fair enough. Thanks

[ellemedit]

@TkDodo I can't find unstable_batchedUpdates in react offical documents. I guess the API changed to flushSync. Can we change it? I want to use tanstack-query in edge runtime.

[TkDodo]

we've removed it in v5 completely: https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#no-longer-using-unstable_batchedupdates-as-the-batching-function-in-react-and-react-native

[Shubhrajyoti-Dey-FrosTiK]

By any chance if you are using NextJS

Edge runtime causes this problem as apparently it creates its own dom where unstable_batchedUpdates is not exported

So just remove edge runtime from the file and/or from 'next.config.js`

in file generally its written as

export const config = {
    runtime: "edge",
}

or

export runtime = "edge"

Remove these from the file or replace edge with nodejs

[sebmarkbage]

This is part of the lighter weight SSR runtime in React which doesn't export this since a noop in React 18. However, we're going to re-add it as a noop for compat and not break the light SSR runtime. Which will then get upgraded in Next.js. So no change needed from react-query.

[gnoff]

tracking PR facebook/react#27028

[tgonzales]

pnpm remove next
pnpm add next@latest
with next 13.5.4 build for me