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