未捕获的类型错误：无法在 React 开发者工具中的 Material UI 的 useStyles 中读取 null 的属性“current”

Question

我正在 Laravel 6 中创建 React。当我在浏览器中运行该程序时，控制台选项卡中没有显示错误，但是如果我单击 React 开发人员工具中的组件选项卡，这些错误将显示在控制台中：

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)

问题可能出在文件中使用 Material UI package: 的这行代码 const classes = useStyles();中main.js。因为如果我注释掉这些行，错误就会消失。

我尝试使用 中的相同代码创建一个新的 create-react-app 项目main.js，然后如果我在浏览器中运行，则不会显示错误。所以 Laravel 和 React 之间可能存在问题。

这是我的文件：

应用程序.js

require("./bootstrap");
require("./components/main");

组件/ main.js

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 <div className={classes.test}>Hello World</div>;
}

if (document.getElementById("app")) {
    ReactDOM.render(<Main />, document.getElementById("app"));
}

包.json

{
"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"
}

}

作曲家.json

{
"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"
    ]
}

}

编辑：我找到了错误的根本原因，它是 React 版本 16.8.0 和 React Developer Tools 版本 4.7.0 不匹配。我将React版本更新到16.9.0，错误消失了。我在这里找到了与我的错误有一些相似之处的解决方案： https://github.com/testing-library/react-hooks-testing-library/issues/151