next.js: Redux devtools not working Next 13
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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 20
- Comments: 23 (4 by maintainers)
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.
Is there any movement on this? Also running into the issue with
react-query, seems Next doesn’t exportunstable_batchedUpdateson the server / when running build.Any news on this? I ran into this issue today.
Hey everyone – the issue with Redux dev tools appears to be fixed in #45649 and the issues with
unstable_batchedUpdatesalso seem resolved as of https://github.com/facebook/react/pull/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!
Also running into this with React Query https://github.com/TanStack/query/issues/5023
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
Same for me with the
/appfolder structureredux-toolkitand Typescript.I tried different configurations with
createStore()and using a middleware, or with the simple approachconfigureStore(), but in the end it looks the same for me. There also other people like this guy https://stackoverflow.com/a/74539739/12237723