query: Unable to resolve unstable_batchedUpdates from react-dom

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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 4
Comments: 17

Most upvoted comments

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

TkDodo on Apr 18, 2023

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.

sebmarkbage on Jun 29, 2023

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",
}

export runtime = "edge"

Remove these from the file or replace edge with nodejs

Shubhrajyoti-Dey-FrosTiK on Jun 11, 2023

@mrzachnugent it works if I remove the following line:

export const runtime = 'experimental-edge';

To me, this looks like a nextJs problem.

TkDodo on Apr 10, 2023

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.

TkDodo on Apr 2, 2023

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?

AdrianMachado on Mar 11, 2023