title: Uncaught TypeError: Cannot read property 'current' of null in useStyles of Material UI in React Developer Tools
body: <p>I am creating React within Laravel 6.  When I ran the program in the browser there have no error showing in the Console Tab, but if I click the Components Tab in React Developer Tools these error shows in the console:</p>
  
  <pre><code>react_devtools_backend.js:24 Uncaught TypeError: Cannot read property 'current' of null
  at Object.useRef (react_devtools_backend.js:24)
  at Object.useRef (app.js:52209)
  at useStyles (app.js:3599)
  at Main (app.js:54031)
  at E (react_devtools_backend.js:24)
  at t.inspectHooksOfFiber (react_devtools_backend.js:24)
  at Be (react_devtools_backend.js:6)
  at Object.inspectElement (react_devtools_backend.js:6)
  at react_devtools_backend.js:6
  at t.value (react_devtools_backend.js:6)
  </code></pre>
  
  <p>The problem might be in this line of code which used Material UI package: 
  <code>const classes = useStyles();</code> in <code>main.js</code> file. Because if I commented out these line the error is gone.</p>
  
  <p>I tried to create a fresh create-react-app project with the same code in <code>main.js</code>, then if I run in the browser no error is showing. So probably it might have an issue between laravel and react. </p>
  
  <p>Here's my files:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>require("./bootstrap");
  require("./components/main");
  </code></pre>
  
  <p>components/<strong>main.js</strong></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { makeStyles } from "@material-ui/core/styles";
  
  const useStyles = makeStyles({
      test: {
          background: "red"
      }
  });
  
  export default function Main() {
      const classes = useStyles();
      return &lt;div className={classes.test}&gt;Hello World&lt;/div&gt;;
  }
  
  if (document.getElementById("app")) {
      ReactDOM.render(&lt;Main /&gt;, document.getElementById("app"));
  }
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
  "private": true,
  "scripts": {
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "npm run development -- --watch",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
      "@babel/preset-react": "^7.0.0",
      "axios": "^0.19",
      "cross-env": "^7.0.2",
      "laravel-mix": "^5.0.1",
      "lodash": "^4.17.13",
      "react": "^16.8.0",
      "react-dom": "^16.8.0",
      "resolve-url-loader": "^3.1.0",
      "sass": "^1.15.2",
      "sass-loader": "^8.0.0"
  },
  "dependencies": {
      "@material-ui/core": "^4.10.0",
      "@material-ui/icons": "^4.9.1",
      "formik": "^2.1.4",
      "react-router-dom": "^5.2.0",
      "react-toastify": "^6.0.5",
      "yup": "^0.29.1"
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>composer.json</strong></p>
  
  <pre><code>{
  "name": "laravel/laravel",
  "type": "project",
  "description": "The Laravel Framework.",
  "keywords": [
      "framework",
      "laravel"
  ],
  "license": "MIT",
  "require": {
      "php": "^7.2",
      "fideloper/proxy": "^4.0",
      "laravel/framework": "^6.2",
      "laravel/passport": "^9.2",
      "laravel/tinker": "^2.0"
  },
  "require-dev": {
      "facade/ignition": "^1.4",
      "fzaninotto/faker": "^1.9.1",
      "laravel/ui": "^1.0",
      "mockery/mockery": "^1.0",
      "nunomaduro/collision": "^3.0",
      "phpunit/phpunit": "^8.0"
  },
  "config": {
      "optimize-autoloader": true,
      "preferred-install": "dist",
      "sort-packages": true
  },
  "extra": {
      "laravel": {
          "dont-discover": []
      }
  },
  "autoload": {
      "psr-4": {
          "App\\": "app/"
      },
      "classmap": [
          "database/seeds",
          "database/factories"
      ]
  },
  "autoload-dev": {
      "psr-4": {
          "Tests\\": "tests/"
      }
  },
  "minimum-stability": "dev",
  "prefer-stable": true,
  "scripts": {
      "post-autoload-dump": [
          "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
          "@php artisan package:discover --ansi"
      ],
      "post-root-package-install": [
          "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
      ],
      "post-create-project-cmd": [
          "@php artisan key:generate --ansi"
      ]
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>Edit:</strong> I find the underlying cause of the error, it's the mismatch of React 
   version 16.8.0 and React Developer Tools version 4.7.0. I updated the React version to 16.9.0 and the error was gone. I find the solution here with some similarities of my error:
  <a href="https://github.com/testing-library/react-hooks-testing-library/issues/151" rel="noreferrer">https://github.com/testing-library/react-hooks-testing-library/issues/151</a> </p>