After updating to the latest Redux Dev Tools extension I am getting: "Symbol.observable as defined by Redux and Redux DevTools do not match."
S

2

8

For some unknown issue after getting the latest update from the redux dev tools chrome extension I am getting the below warning message:

Symbol.observable as defined by Redux and Redux DevTools do not match. This could cause your app to behave differently if the DevTools are not loaded. Consider polyfilling Symbol.observable before Redux is imported or avoid polyfilling Symbol.observable altogether.

Symbol Observable Error Message

By reading the error message I am understanding that redux and redux dev tools should use the same Symbol.observable but they are not. It is very weird though as I haven't changed anything within my code and I am using the code as per documentation.

My question is if you have any clue on which direction should I go? Is this a chrome extension bug that we just need to report?

I am using latest chrome extension with name Redux DevTools. I've noticed that if I uninstall the chrome dev-tool extension this warning message is not appearing anymore.

My code looks like this:

  // The redux-devtools-extension is renamed to this npm package
  import { composeWithDevTools } from "@redux-devtools/extension"; 

  // Some code here ...

  const composeEnhancersPersonalProject = composeWithDevTools({
    name: `My Project`,
  });

  // Some other code here ...
  
  const myStore = createStore(
    persistedReducer,
    composeEnhancersPersonalProject(
      applyMiddleware(serverRequestMiddleware, rehydrateMiddleware)
    )
  );
Selffertilization answered 16/1, 2022 at 7:2 Comment(0)
S
7

After spending a couple of hours researching and doing some trial and error, I've finally found a work-around for this warning.

As per github comment you can add the below lines at the very beginning of your React/Redux project:

// eslint-disable-next-line
import Symbol_observable from 'symbol-observable';

It seems that for a weird reason my project does not polyfill the Symbol observable so if we add the npm library symbol-observable the warning is getting disappeared.

The good news is that trying the latest create-react-app project with template redux (e.g. npx create-react-app my-app --template redux), the issue is not there anymore. So it should have to do with a combination of versions as @markerikson mentioned within my project specifically.

Selffertilization answered 23/4, 2022 at 8:14 Comment(0)
K
3

This is a brand-new check and warning that was just added to the Redux DevTools code in the last few days:

https://github.com/reduxjs/redux-devtools/issues/1002#issuecomment-1011097465

If you're still using Redux 4.0.5 or earlier, it's possible that upgrading to Redux 4.1.x would fix this warning (because 4.1.0 removed the use of the symbol-observable polyfill).

That said, you should really be using our official Redux Toolkit package to set up the Redux store and write your Redux logic, rather than using the original core createStore method directly.

Kessia answered 16/1, 2022 at 18:5 Comment(9)
A quick note here: This is still doesn't work for me but at least I am the right direction to find it out. Thank you @Kessia for all the support that you are giving πŸ€— . Redux toolkit seems awesome and the right way to go. Keep up the good work. – Selffertilization
I am having the same issue here updating to 4.1.2 did not fix it, were you able to find more about this issue? – Desolation
Hello @WildThing, it doesn't work for me either. Things that I've tried so far: 1. Updating redux to the latest version (currently 4.1.2) 2. Replacing the createStore with @reduxjs/toolkit and configureStore 3. Removing the package: @redux-devtools/extension as it is included in @reduxjs/toolkit But still no luck. – Selffertilization
The message is coming from within the actual Redux DevTools Extension in the browser itself. Try updating that to the latest version. – Kessia
Still doesn't work. I am using latest chrome extension (current latest 3.0.9) – Selffertilization
At this point I would recommend filing a new issue with a reproduction on the Redux DevTools repo and get help directly from the maintainer. – Kessia
Yes, I agree. I hope I will have some time to create a clean repo with the reproduction of this. – Selffertilization
2 months later, I still have this issue and could not resolve it.. any updates with you guys? – Desolation
I've finally found a work-around for this. Just posted it as an answer to this question. – Selffertilization

© 2022 - 2025 β€” McMap. All rights reserved.