Symbol.observable do not match

[tdonhauser]

Hello,

I use devtools version 3.0.19 in chrome. Once I load my application I get this warning:

Has anyone an idea how to solve this? Thanks!

[rdNmltsv]

Same for me. I have Redux DevTools version 3.0.19.

Project dependencies

"dependencies": {
    "@ant-design/icons": "5.0.1",
    "@apollo/client": "^3.7.11",
    "@babel/core": "^7.0.0-0",
    "@metamask/detect-provider": "2.0.0",
    "@reduxjs/toolkit": "^1.9.3",
    "antd": "^5.4.2",
    "axios": "0.25.0",
    "classnames": "2.3.1",
    "ethers": "5.7.1",
    "graphql": "^16.6.0",
    "next": "13.2.4",
    "next-redux-wrapper": "8.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-redux": "8.0.5",
    "react-toastify": "9.0.8",
    "redux": "4.2.1",
    "redux-persist": "6.0.0",
    "redux-saga": "1.2.3",
    "sass": "1.55.0",
    "usehooks-ts": "^2.9.1"
  },
 "devDependencies": {
    "@graphql-codegen/cli": "^3.3.0",
    "@graphql-codegen/client-preset": "^3.0.0",
    "@metamask/providers": "^10.2.1",
    "@types/classnames": "2.3.1",
    "@types/node": "18.7.18",
    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "@types/react-redux": "7.1.22",
    "@types/redux-saga": "0.10.5",
    "@typescript-eslint/eslint-plugin": "5.38.0",
    "@typescript-eslint/parser": "5.38.0",
    "eslint": "8.23.1",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-typescript": "17.0.0",
    "eslint-config-next": "12.3.1",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-promise": "6.0.0",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "eventemitter3": "4.0.7",
    "husky": "7.0.4",
    "plop": "3.0.5",
    "typescript": "4.8.3"
  }
  

And Redux Store configuration:

import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import { createWrapper } from 'next-redux-wrapper';
import { rootReducer } from './rootReducer';
import { rootSaga } from './rootSaga';

const sagaMiddleware = createSagaMiddleware();

export const makeStore = () => {
  const store = configureStore({
    reducer: rootReducer,
    middleware: [sagaMiddleware],
    devTools: process.env.NODE_ENV !== 'production',
  });
  
  sagaMiddleware.run(rootSaga);

  return store;
};

type Store = ReturnType<typeof makeStore>;
export type State = ReturnType<Store['getState']>;
export const wrapper = createWrapper<Store>(makeStore, { debug: true });

I use Next.js with next-redux-wrapper, so here is my _app.tsx:

import React, { FC } from 'react';
import { ToastContainer } from 'react-toastify';
import type { AppProps } from 'next/app';
import { Provider } from 'react-redux';
import { wrapper } from 'store/configureStore';
import 'react-toastify/dist/ReactToastify.css';
import 'assets/styles/styles.css';

const MyApp: FC<AppProps> = ({ Component, ...rest }) => {
  const { store, props } = wrapper.useWrappedStore(rest);

  return (
    <Provider store={store}>
      <Component {...props.pageProps} />
      <ToastContainer
        limit={3}
        theme="light"
      />
    </Provider>
  );
};

export default MyApp;

[Methuselah96]

One thing you can do is add a debugger statement to see what is setting Symbol.observable:

const backingField = Symbol.observable;
Object.defineProperty(Symbol, 'observable', {
    get: function () {
        return backingField;
    },
    set: function (value) {
        debugger; // sets breakpoint
        backingField = value;
    }
});