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

Question

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.

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

Answer 1

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.

Answer 2

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.