如何使用 mobx-react-devtools

Question

我已将 mobx-react-devtools 安装为开发依赖项，在我的 index.js 中导入了它的引用，并按照 npm 文档中的说明插入了 <DevTools />。

但是我得到了 3 个错误：

TypeError: Cannot read property 'on' of undefined
TypeError: (0 , a.trackComponents) is not a function
TypeError: Cannot read property 'dispose' of undefined

我做错了什么？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { observable, configure } from 'mobx';
import { observer } from 'mobx-react';
import DevTools from 'mobx-react-devtools';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
configure({ enforceActions: 'observed' }); // All state that is observed somewhere needs to be changed through actions

const appState = observable({
  count: 0,
  incCount: () => {
    appState.count += 1;
  },
  decCount: () => {
    appState.count -= 1;
  },
});

const Counter = observer((props) => (
  <section>
    {props.appState.count}
    <div>
      <button onClick={props.appState.incCount}>Add</button>
      <button onClick={props.appState.decCount}>Dec</button>
      <DevTools />
    </div>
  </section>
));

ReactDOM.render(
  <React.StrictMode>
    <Counter appState={appState} />
  </React.StrictMode>,
  document.getElementById('root')
);

package.json

{
  "name": "react-mobx-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.3.0",
    "mobx": "^6.0.4",
    "mobx-react": "^7.0.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "mobx-react-devtools": "^6.1.1"
  }
}

我的github

Answer 1

来自 mobx-react-devtools 团队的制作者

注意：此包已弃用。请改用 browser plugin。另请注意，对于 mobx-react@6 及更高版本，不再需要该软件包，请参阅 changelog

如何使用 mobx-react-devtools

How to use mobx-react-devtools

mobx

mobx-react