【发布时间】：2021-08-22 00:55:00
【问题描述】：
我有一个导出组件的组件库
// Test.tsx
import React from 'react';
const Test = () => <p>Test</p>;
export default Test;
和
// TestB.tsx
import React from 'react';
import { Typography } from '@material-ui/core';
const TestB = () => <Typography>TestB</Typography>;
export default TestB
在我的另一个包中，我正在导入组件
import React from 'react';
import { Box } from '@components';
import { Test, TestB } from 'component-library';
const Example = (): JSX.Element | null => {
return (
<Box mb={3}>
<Test />
<TestB />
</Box>
);
};
export default Example;
当我导入 Test 时，我得到了预期的 <p>Test</p>，但是当我导入 TestB 时，我得到了以下错误：
react.development.js:1476 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.
at resolveDispatcher (react.development.js:1476)
at Object.useContext (react.development.js:1484)
at useTheme (useTheme.js:4)
at useStyles (makeStyles.js:222)
at WithStyles (withStyles.js:55)
at renderWithHooks (react-dom.development.js:14803)
at updateForwardRef (react-dom.development.js:16816)
at beginWork (react-dom.development.js:18645)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
-
我已经确认
react和react-dom都在16.9.0版本上 -- 虽然这似乎无关紧要，因为它适用于Test，但不适用于TestB -
我不知道如何通过实现
TestB来破坏Rules of Hooks，因为它不使用任何钩子 -
我已经尝试通过 package.json 删除除了一个版本之外的所有 react -- 这似乎并不相关，因为它适用于
Test，但不适用于TestB
组件库 package.json 依赖项
"dependencies": {
"@material-ui/core": "4.11.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-svg": "^13.0.6"
},
"devDependencies": {
"@babel/core": "^7.14.3",
"@types/jest": "^24.0.24",
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"babel-loader": "^8.2.2",
"eslint": "^7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "^24.9.0",
"rollup": "^1.27.13",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-typescript2": "^0.25.3",
"standard": "^14.3.1",
"standard-prettier": "^1.0.1",
"ts-jest": "^24.2.0",
"typescript": "^3.7.3"
},
项目 package.json 依赖项
"dependencies": {
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-flow-strip-types": "^7.1.6",
"@babel/plugin-transform-modules-commonjs": "^7.4.3",
"@babel/polyfill": "^7.6.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.9.0",
"@date-io/moment": "1.x",
"@emotion/core": "^10.0.10",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",
"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.4.0",
"@styled-system/css": "^1.0.3",
"@typeform/embed": "^0.5.12",
"attr-accept": "^1.1.0",
"autoprefixer": "^8.0.0",
"awesome-typescript-loader": "^4.0.0",
"axios": "^0.19.2",
"babel-loader": "^8.0.4",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-styled-components": "^1.10.0",
"classnames": "^2.2.5",
"compression-webpack-plugin": "^1.0.0",
"core-js": "^3.2.1",
"cropperjs": "^1.3.3",
"css-hot-loader": "^1.3.6",
"css-loader": "^0.28.7",
"d3": "^6.2.0",
"d3-selection": "^2.0.0",
"date-fns": "^2.9.0",
"dot-prop-immutable": "^1.4.0",
"downshift": "^5.0.3",
"emotion-theming": "^10.0.10",
"empty": "^0.10.1",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^7.3.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jest": "^21.5.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1",
"extract-text-webpack-plugin": "^3.0.1",
"faker": "^4.1.0",
"fetch-mock": "^6.5.2",
"file-loader": "^0.11.2",
"file-saver": "^2.0.2",
"final-form": "^4.20.1",
"final-form-arrays": "^3.0.2",
"final-form-calculate": "^1.3.1",
"glob": "^7.1.2",
"hellosign-embedded": "^2.8.0",
"identity-obj-proxy": "^3.0.0",
"isomorphic-fetch": "^2.2.1",
"js-yaml": "^3.10.0",
"jwt-decode": "^2.2.0",
"lint-staged": "^10.2.11",
"loaders.css": "^0.1.2",
"lost": "^8.2.0",
"components": "https://github.com/example/components#dev",
"mock-geolocation": "^1.0.11",
"moment": "2.24.0",
"moment-locales-webpack-plugin": "^1.2.0",
"moment-timezone": "^0.5.28",
"node-sass": "^4.12.0",
"notistack": "^0.9.11",
"numeral": "^2.0.6",
"path-complete-extname": "^1.0.0",
"postcss-automath": "^1.0.1",
"postcss-calc": "^7.0.2",
"postcss-flexbugs-fixes": "^3.2.0",
"postcss-font-magician": "^2.0.0",
"postcss-import": "^10.0.0",
"postcss-initial": "^2.0.0",
"postcss-loader": "^2.0.6",
"postcss-smart-import": "^0.7.5",
"precss": "^2.0.0",
"prettier-eslint": "^8.7.0",
"prop-types": "^15.5.10",
"qs": "^6.5.1",
"ramda": "^0.27.1",
"rc-time-picker": "^3.7.2",
"react": "17.0.2",
"react-addons-shallow-compare": "^15.6.0",
"react-confetti": "^6.0.0",
"react-content-loader": "^4.0.1",
"react-cropper": "^1.0.1",
"react-dates": "^21.8.0",
"react-datetime": "^2.16.3",
"react-dom": "17.0.2",
"react-final-form": "^6.5.1",
"react-final-form-arrays": "^3.1.2",
"react-final-form-listeners": "^1.0.3",
"react-hot-loader": "^4.6.3",
"react-measure": "^2.0.2",
"react-modal": "^3.8.1",
"react-motion": "^0.5.1",
"react-onclickoutside": "^6.7.0",
"react-portal": "^4.0.0",
"react-pose": "^4.0.8",
"react-pose-text": "^3.1.0",
"react-query": "^2.5.13",
"react-redux": "^7.2.0",
"react-resize-detector": "^6.6.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-select": "^1.0.0-rc.10",
"react-svg-loader": "^1.1.1",
"react-switch": "^2.0.0",
"react-table": "^7.0.1",
"react-tabs": "^2.2.2",
"react-test-renderer": "^16.5.2",
"react-text-mask": "^5.4.3",
"react-textfit": "^1.1.0",
"react-use": "^15.3.4",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.6",
"react-window-infinite-loader": "^1.0.5",
"react-youtube": "^7.5.0",
"react_ujs": "^2.4.4",
"recompose": "^0.26.0",
"redux": "^4.0.1",
"redux-actions": "^2.6.5",
"redux-analytics": "^0.3.1",
"redux-form": "^8.3.6",
"redux-mock-store": "^1.4.0",
"redux-observable": "^1.1.0",
"redux-persist": "^5.6.12",
"redux-responsive": "^4.3.8",
"redux-thunk": "^2.2.0",
"regenerator-runtime": "^0.11.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.1.0",
"rxjs": "^6.4.0",
"sass-loader": "^6.0.6",
"shortid": "^2.2.8",
"sinon": "^6.3.5",
"start-server-and-test": "^1.7.11",
"style-loader": "^0.18.2",
"styled-components": "^4.1.3",
"styled-normalize": "^8.0.4",
"styled-system": "^3.2.1",
"svg-react-loader": "^0.4.5",
"swr": "^0.2.0",
"ts-jest": "^23.1.3",
"typescript": "^3.8.3",
"typings-for-css-modules-loader": "^1.7.0",
"warnings-to-errors-webpack-plugin": "^2.0.1",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-dev-server": "^2.7.1",
"webpack-manifest-plugin": "^1.3.1",
"webpack-merge": "^4.1.0",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"@svgr/cli": "^5.4.0",
"@testing-library/cypress": "^6.0.0",
"@testing-library/react": "^8.0.6",
"@types/classnames": "^2.2.3",
"@types/faker": "^4.1.4",
"@types/fetch-mock": "^6.0.3",
"@types/intercom-web": "^2.8.7",
"@types/jest": "^25.2.3",
"@types/jwt-decode": "^2.2.1",
"@types/moment-timezone": "^0.5.4",
"@types/qs": "^6.5.1",
"@types/query-string": "^6.3.0",
"@types/ramda": "^0.27.36",
"@types/react": "^16.7.20",
"@types/react-content-loader": "^3.1.4",
"@types/react-dates": "^17.1.14",
"@types/react-dom": "^16.0.11",
"@types/react-loadable": "^5.4.2",
"@types/react-measure": "^2.0.2",
"@types/react-modal": "^3.8.2",
"@types/react-motion": "^0.0.26",
"@types/react-onclickoutside": "^6.0.3",
"@types/react-redux": "^7.1.9",
"@types/react-router-dom": "^5.1.3",
"@types/react-select": "^1.2.7",
"@types/react-table": "^7.0.13",
"@types/react-test-renderer": "^16.0.2",
"@types/recompose": "^0.26.1",
"@types/redux-actions": "^2.6.0",
"@types/redux-form": "^7.4.16",
"@types/redux-mock-store": "^1.0.0",
"@types/shortid": "^0.0.29",
"@types/sinon": "^5.0.5",
"@types/styled-components": "^4.1.18",
"@types/styled-system": "^3.1.1",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^3.4.0",
"@typescript-eslint/parser": "^3.4.0",
"cypress": "6.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"jest": "^26.0.1",
"miragejs": "^0.1.35",
"pre-commit": "^1.2.2",
"prettier": "^2.0.5"
},
有什么想法吗？
【问题讨论】：
-
向我们展示您如何导入和使用
TextB -
@Dominik 更新
-
能否在return语句前console.log(TestB)确保它是一个组件/函数？
-
@JordanTheGenius {$$typeof: Symbol(react.element), type: {...}, key: null, ref: null, props: {...}, ...} $$typeof: Symbol( react.element) key: null props: {children: "-Tested-"} ref: null type: {$$typeof: Symbol(react.forward_ref), propTypes: {…}, Naked: {…}, options: { ...}，渲染：ƒ，...} _owner：null _store：{已验证：false} _self：null _source：null proto：Object
-
版本相关，Typography 内部使用了钩子，这就是为什么您在 TestB 中遇到错误的原因，请尝试在项目中设置与组件包中相同的 react 版本
标签： reactjs react-hooks material-ui