Redux devtools not working Next 13

[fasetto]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: 7.17.1
    Relevant packages:
      next: 13.0.7-canary.1
      eslint-config-next: 13.0.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://stackblitz.com/edit/nextjs-z7lnws?file=app/store.js

To Reproduce

• Go to the reproduction link.
• Open the redux dev tools extension.
• Check if you can see state for counter

Describe the Bug

Its only show the next-router instance. There is no other instance for me to see the states & events related to my application.

Not sure if its related but, I saw this warning on the console.

wait  - compiling...
wait  - compiling /_error (client and server)...
warn  - ./node_modules/.pnpm/react-redux@8.0.5_2zx2umvpluuhvlq44va5bta2da/node_modules/react-redux/es/utils/reactBatchedUpdates.js
export 'unstable_batchedUpdates' (reexported as 'unstable_batchedUpdates') was not found in 'react-dom' (possible exports: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createPortal, flushSync, preinit, preload, version)

Expected Behavior

I should be able to see the instance of my application with related redux states & events.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1389

[ciruz]

Same for me with the /app folder structure redux-toolkit and Typescript.

I tried different configurations with createStore() and using a middleware, or with the simple approach configureStore(), but in the end it looks the same for me. There also other people like this guy https://stackoverflow.com/a/74539739/12237723

[zkSoju]

Also running into this issue when using the /app folder, seems to be the problem. Currently using it with Zustand.

[GautierCo]

Same problem when I'm using the /app folder. (with redux-toolkit)

[mezhinsky]

Same here, dev tools connecting only if you change the init state in reducer

[angelmtztrc]

Same here, dev tools only connect after a change, but I can't get the actual or current value of my state in dev tools.

[switz]

Seeing the same warning/error:

../../node_modules/react-redux/es/utils/reactBatchedUpdates.js
export 'unstable_batchedUpdates' (reexported as 'unstable_batchedUpdates') was not found in 'react-dom' (possible exports: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createPortal, flushSync, preinit, preload, version)
``

[vishalkumar2806]

Im also having the same problem

[vishalkumar2806]

annyone got any solution

[markerikson]

FYI folks, I saw this get reported in the Redux Toolkit repo today, and figured out the issue. Next's internal "router reducer" is trying to connect to the Redux DevTools so that the Next devs can debug it, but the connection code accidentally hardcoded the "instance ID". That's overriding any Redux DevTools connection set up by your application.

I've notified the Next devs and they should hopefully fix it early next week.

[vishalkumar2806]

I reported it.... But if you know the solution please create a file and we will replace it in our source

[markerikson]

@vishalkumar2806 : There is no solution yet - it's a bug in Next's code.

[vishalkumar2806]

no you said that you give suggestion if you can solve it please do it

[vishalkumar2806]

I got a temporary solution for this problem... actually we can't the state because of our instance but its exist... so what you can do is get a copy of state and cosole log it like this
do everything as explained in the tutorial of redux toolkit
const state = useSelector( (state) => state )
const count = useSelector((state : any) => state.counter.value)
const dispatch = useDispatch()
console.log(state)
now i can see the current state in console... tho this is temporary like you can preserve state like in redux dev tools

[NathanVG]

FYI folks, I saw this get reported in the Redux Toolkit repo today, and figured out the issue. Next's internal "router reducer" is trying to connect to the Redux DevTools so that the Next devs can debug it, but the connection code accidentally hardcoded the "instance ID". That's overriding any Redux DevTools connection set up by your application.

I've notified the Next devs and they should hopefully fix it early next week.

Any news on this? I ran into this issue today.

[AdrianMachado]

Also running into this

[codebycarlos]

Also running into this with React Query TanStack/query#5023

[ciruz]

This issue was also discussed here reduxjs/redux-toolkit#3154

Update: confirmed that this is a Next bug. They tried to wrap useReducer to talk to the Redux DevTools, but hardcoded the instanceId:
https://github.com/vercel/next.js/blob/0d7f7653e81a4f2aa16be7ead286e09b22761f52/packages/next/src/client/components/use-reducer-with-devtools.ts#LL144-L149C6

I've passed along a suggestion to have them fix that and call the Redux DevTools connect() method correctly.
reduxjs/redux-toolkit#3154 (comment)

@markerikson

There was a fix by @timneutkens fea8c8e addressing this issue.

For me this issue it's gone, I'm on next 13.2.4 right now, using the /app - directory. The redux devtools work as before and as expected. Just make sure that you have the correct site selected in the dropdown.

[madi-tracksuit]

Is there any movement on this? Also running into the issue with react-query, seems Next doesn't export unstable_batchedUpdates on the server / when running build.

[Shubhrajyoti-Dey-FrosTiK]

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

[engineering-ks]

So I cannot use edge runtime in a project that has react-query ? That is so unfortunaate.

[GabeDuarteM]

That's probably the same as #47057 (comment) I imagine.
There, I posted an updated minimal reproduction repo using the latest canary and react-query versions, I'll also post it here in case it's helpful:

GabeDuarteM/nextjs-bug-unstable_batchedUpdates

and yeah, it seems that for now the edge runtime basically breaks anything that depends on unstable_batchedUpdates, which includes react-query atm, and from what I can see also quite a few other frameworks, like redux for example...

The workaround, for now, is not to use the edge runtime but would be great to have this properly fixed, as those are huge and popular libraries and I can imagine this would be a huge dealbreaker for people using edge on Vercel...

[ztanner]

Hey everyone -- the issue with Redux dev tools appears to be fixed in #45649 and the issues with unstable_batchedUpdates also seem resolved as of facebook/react#27028 (cc @GabeDuarteM your repro worked for me after upgrading Next).

Going to close this out but if you continue to see issues please open a new ticket!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.