如何使用mobx-react开发工具

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

软件包.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团队的制造商

注意：此程序包已弃用。请改用浏览器插件。还要注意mobx-react@6并且应该不再需要更高的包，请参阅更改日志