【发布时间】：2022-09-30 06:37:10
【问题描述】：
我的反应项目中出现以下错误：
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
React 2
useTheme useTheme.js:4
useTheme useThemeWithoutDefault.js:9
useTheme useTheme.js:7
Box createBox.js:22
React 17
js index.js:8
factory react refresh:6
Webpack 3
react.development.js:1447
React 2
useTheme useTheme.js:4
useTheme useThemeWithoutDefault.js:9
useTheme useTheme.js:7
Box createBox.js:22
React 17
js index.js:8
factory react refresh:6
Webpack 3
__webpack_require__
<anonymous>
<anonymous>
该项目由两个独立的部分组成，Components 和 Onboarding。 Onboarding 使用 Components 作为依赖项。
在Components 中，我有2 个package.json 文件，一个在根目录，一个在src。
根package.json:
{
\"name\": \"My Project\",
\"version\": \"2.0.0\",
\"description\": \"Main React Library\",
\"main\": \"dist/index.js\",
\"module\": \"dist/index.js\",
\"bundleDependencies\": false,
\"deprecated\": false,
\"license\": \"MIT\",
\"private\": true,
\"sideEffects\": false,
\"scripts\": {
\"build\": \"rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files\"
},
\"devDependencies\": {
\"@babel/cli\": \"^7.18.10\",
\"@babel/core\": \"^7.18.10\",
\"@babel/plugin-syntax-flow\": \"^7.18.6\",
\"@babel/polyfill\": \"^7.12.1\",
\"@babel/preset-env\": \"^7.18.10\",
\"@babel/preset-flow\": \"^7.18.6\",
\"@babel/preset-react\": \"^7.18.6\",
\"@types/node\": \"^18.7.15\",
\"typescript\": \"^4.8.2\",
\"reactstrap\": \"^9.1.4\",
\"react-quill\": \"^2.0.0\"
},
\"dependencies\": {}
}
package.json 内src:
{
\"name\": \"My Project\",
\"version\": \"2.0.0\",
\"description\": \"Main React Library\",
\"main\": \"index.js\",
\"module\": \"index.js\",
\"bundleDependencies\": false,
\"deprecated\": false,
\"license\": \"MIT\",
\"private\": true,
\"sideEffects\": false,
\"dependencies\": {
\"@mui/icons-material\": \"5.4.1\",
\"@mui/material\": \"5.4.1\",
\"@mui/styled-engine\": \"5.4.1\",
\"react\": \"17.0.2\",
\"react-dom\": \"17.0.2\",
\"react-router-dom\": \"6.2.1\",
\"axios\": \"^0.27.2\",
\"uuid\": \"^9.0.0\",
\"bootstrap\": \"^5.2.0\"
}
}
在Onboarding 内部，我还有2 个package.json 文件，一个在根目录，一个在src：
根package.json:
{
\"name\": \"onboarding-ui\",
\"description\": \"\",
\"version\": \"0.1.0\",
\"scripts\": {
\"start\": \"sls offline --aws-profile\",
\"deploy\": \"sls deploy -s stage --aws-profile\",
\"test\": \"sls invoke test\"
},
\"devDependencies\": {
\"aws-sdk-mock\": \"^5.7.0\",
\"serverless\": \"^3.21.0\",
\"serverless-cloudfront-invalidate\": \"^1.11.0\",
\"serverless-latest-layer-version\": \"^2.1.1\",
\"serverless-mocha-plugin\": \"^1.12.0\",
\"serverless-offline\": \"^6.8.0\",
\"serverless-prune-plugin\": \"^1.4.3\",
\"serverless-s3-sync\": \"^1.14.4\",
\"serverless-scriptable-plugin\": \"^1.0.5\"
}
}
package.json 内src:
{
\"name\": \"onboarding\",
\"version\": \"0.2.17\",
\"private\": true,
\"author\": \"Me\",
\"license\": \"MIT\",
\"description\": \"presentation layer.\",
\"engines\": {
\"node\": \"14 || 15 || 16\",
\"npm\": \">=6\"
},
\"dependencies\": {
\"@asseinfo/react-kanban\": \"2.2.0\",
\"@emotion/cache\": \"11.7.1\",
\"@emotion/react\": \"11.7.1\",
\"@emotion/styled\": \"11.6.0\",
\"@mui/icons-material\": \"5.4.1\",
\"@mui/material\": \"5.4.1\",
\"@mui/styled-engine\": \"5.4.1\",
\"@mui/styles\": \"^5.9.2\",
\"@react-jvectormap/core\": \"1.0.1\",
\"@react-jvectormap/world\": \"1.0.0\",
\"@testing-library/jest-dom\": \"5.16.2\",
\"@testing-library/react\": \"12.1.2\",
\"@testing-library/user-event\": \"13.5.0\",
\"accounted-ui\": \"../../Components/dist\",
\"axios\": \"^0.27.2\",
\"chart.js\": \"3.4.1\",
\"chroma-js\": \"2.4.2\",
\"crypto-js\": \"^4.1.1\",
\"dropzone\": \"5.9.2\",
\"flatpickr\": \"4.6.9\",
\"formik\": \"^2.2.9\",
\"html-react-parser\": \"1.4.8\",
\"i18next\": \"^21.9.1\",
\"i18next-browser-languagedetector\": \"^6.1.5\",
\"i18next-http-backend\": \"^1.4.1\",
\"lodash.debounce\": \"^4.0.8\",
\"prop-types\": \"15.8.1\",
\"react\": \"17.0.2\",
\"react-chartjs-2\": \"3.0.4\",
\"react-confetti\": \"^6.1.0\",
\"react-csv\": \"^2.2.2\",
\"react-debounce-input\": \"^3.3.0\",
\"react-dom\": \"17.0.2\",
\"react-flatpickr\": \"3.10.7\",
\"react-github-btn\": \"1.2.1\",
\"react-i18next\": \"^11.18.5\",
\"react-images-viewer\": \"1.7.1\",
\"react-quill\": \"1.3.5\",
\"react-router-dom\": \"6.2.1\",
\"react-scripts\": \"5.0.0\",
\"react-table\": \"7.7.0\",
\"react-toastify\": \"^9.0.3\",
\"stylis\": \"4.0.13\",
\"uuid\": \"8.3.2\",
\"web-vitals\": \"2.1.4\",
\"yup\": \"^0.32.11\"
},
\"scripts\": {
\"start\": \"react-scripts start\",
\"build:dev\": \"dotenv -e .env.dev react-scripts build\",
\"build:prod\": \"dotenv -e .env.prod react-scripts build\",
\"test\": \"react-scripts test\",
\"eject\": \"react-scripts eject\",
\"install:clean\": \"rm -rf node_modules/ && rm -rf package-lock.json && npm install\"
},
\"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\": {
\"accounted-ui\": \"../../Components/dist\", // this is how I\'m pulling in the `Components` folder
\"dotenv-cli\": \"^5.1.0\",
\"eslint\": \"8.8.0\",
\"eslint-config-airbnb\": \"19.0.4\",
\"eslint-config-prettier\": \"8.3.0\",
\"eslint-plugin-import\": \"2.25.4\",
\"eslint-plugin-jsx-a11y\": \"6.5.1\",
\"eslint-plugin-prettier\": \"4.0.0\",
\"eslint-plugin-react\": \"7.28.0\",
\"eslint-plugin-react-hooks\": \"4.3.0\",
\"prettier\": \"2.5.1\"
}
}
该项目正在使用 Material UI，我怀疑这也可能与此有关。我尝试了很多建议，但到目前为止没有任何效果。如果有人可以提供帮助，将不胜感激。
标签： node.js reactjs json npm package.json