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)
``

[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.

[markerikson]

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

[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.