title: How to use mobx-react-devtools
body: <p>I've installed <code>mobx-react-devtools</code> as a dev dependency, imported its reference in my <code>index.js</code>, and inserted <code>&lt;DevTools /&gt;</code> as instructed in the npm docs.</p>
  <p>However I get 3 errrors:</p>
  <pre><code>TypeError: Cannot read property 'on' of undefined
  TypeError: (0 , a.trackComponents) is not a function
  TypeError: Cannot read property 'dispose' of undefined
  </code></pre>
  <p>What am I doing wrong?</p>
  <p>index.js</p>
  <pre><code>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: () =&gt; {
      appState.count += 1;
    },
    decCount: () =&gt; {
      appState.count -= 1;
    },
  });
  
  const Counter = observer((props) =&gt; (
    &lt;section&gt;
      {props.appState.count}
      &lt;div&gt;
        &lt;button onClick={props.appState.incCount}&gt;Add&lt;/button&gt;
        &lt;button onClick={props.appState.decCount}&gt;Dec&lt;/button&gt;
        &lt;DevTools /&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  ));
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;Counter appState={appState} /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;react-mobx-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.6&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.2.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.3.0&quot;,
      &quot;mobx&quot;: &quot;^6.0.4&quot;,
      &quot;mobx-react&quot;: &quot;^7.0.5&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.1&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;devDependencies&quot;: {
      &quot;mobx-react-devtools&quot;: &quot;^6.1.1&quot;
    }
  }
  </code></pre>
  <p>My <a href="https://github.com/develijahlee/react-mobx-app" rel="nofollow noreferrer">github</a></p>