Reactjs npm链接库到应用程序的钩子调用无效
无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1.React和渲染器的版本可能不匹配（例如React DOM） 2.你可能违反了钩子的规则 3.同一应用程序中可能有多个React副本 我正在开发自己的组件库，并通过Reactjs npm链接库到应用程序的钩子调用无效,reactjs,npm,webpack,Reactjs,Npm,Webpack,无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1.React和渲染器的版本可能不匹配（例如React DOM） 2.你可能违反了钩子的规则 3.同一应用程序中可能有多个React副本 我正在开发自己的组件库，并通过npm链接在我的应用程序中使用相同的库，但在测试时出现上述错误 这是我的webpack.config const path = require('path'); module.exports = { entry: './src/index.ts
npmconst path = require('path');
module.exports = {
entry: './src/index.ts',
devtool: 'eval-source-map',
module: {
rules: [
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
{
test: /\.(tsx|ts|mjs)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [['@babel/plugin-proposal-class-properties'], ['@babel/plugin-transform-runtime', { "regenerator": true }]],
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
},
},
},
{
test: /\.mjs$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
{
test: /\.(css|scss)$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
exclude: [/\.js$/, /\.ts$/, /\.html$/, /\.json$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
resolve: {
extensions: ['.mjs', '.js', '.ts', '.tsx', '.json'],
},
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '',
filename: 'bundle.js',
libraryTarget: 'commonjs'
}
};
{
"name": "abc",
"version": "1.0.42",
"description": "A React component library",
"main": "dist/bundle.js",
"types": "dist/types/index.d.ts",
"scripts": {
"test": "jest",
"build:development": "npm-run-all --parallel webpack:watch generate-typings",
"build:production": "npm-run-all webpack:prod generate-typings",
"build:clean": "rmdir /Q /S dist",
"generate-typings": "tsc --declaration --emitDeclarationOnly",
"styleguide": "npx styleguidist server",
"styleguide:build": "npx styleguidist build",
"webpack:watch": "webpack --watch --mode=development",
"webpack:prod": "webpack --mode=production",
"localVersion": "node -p \"require('./package.json').version\"> localVersion.txt",
"serverVersion": "npm view @company/abc version > serverVersion.txt"
},
"repository": {
"type": "git",
"url": "url"
},
"keywords": [
"react",
"components",
"typescript"
],
"author": "Spencer Cousino",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@types/enzyme": "^3.10.5",
"@types/fetch-mock": "^7.3.2",
"@types/jest": "^24.9.1",
"@types/nock": "^10.0.3",
"@types/node": "^11.15.9",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-table": "^6.8.7",
"async-wait-until": "^1.2.4",
"babel-loader": "^8.1.0",
"css-loader": "^1.0.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"fetch-mock": "^7.7.3",
"file-loader": "^3.0.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.3.0",
"nock": "^10.0.6",
"node-fetch": "^2.6.1",
"node-sass": "^4.14.1",
"npm-run-all": "^4.1.5",
"oidc-client": "^1.10.1",
"powerbi-report-component": "^1.6.0",
"prettier": "1.17.0",
"react": "^16.14.0",
"react-docgen-typescript": "^1.20.1",
"react-dom": "^16.14.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-table": "6.10.3",
"react-slick": "^0.23.2",
"react-spinners": "^0.9.0",
"react-styleguidist": "^11.1.5",
"reactstrap": "^8.4.1",
"sass-loader": "^7.3.1",
"ts-jest": "^25.4.0",
"typescript": "^3.8.3",
"url-loader": "^1.1.2",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/runtime": "^7.12.5",
"@company/abc": "0.0.6",
"@company/abc1": "^1.2.0",
"@company/abc2": "^1.0.23",
"@company/abc3": "^1.9.1",
"@company/abc4": "^1.0.1",
"core-js": "^3.8.0",
"date-fns": "^1.30.1",
"react-bingmaps": "^3.6.1",
"react-bootstrap": "^0.32.3",
"react-grid-layout": "^0.16.6",
"react-scripts": "^4.0.3",
"react-tabs": "^3.1.1",
"slick-carousel": "^1.8.1"
},
"peerDependencies": {
"react": "~16.8.4",
"react-dom": "~16.8.4",
"@types/node": "^11.11.6",
"node-fetch": "^2.3.0",
"oidc-client": "^1.7.0",
"powerbi-report-component": "^1.1.3",
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"react-slick": "^0.23.2",
"react-spinners": "^0.5.3",
"reactstrap": "^8.0.0"
},
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"setupFilesAfterEnv": [
"./testSetup.ts"
],
"moduleNameMapper": {
"^.+\\.(css|scss)$": "identity-obj-proxy",
"^.+\\.(svg)$": "<rootDir>/src/mocks/fileMock.js"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx"
],
"collectCoverageFrom": [
"**/context-components/**/*.{js,jsx,ts,tsx}"
]
}
}
{
“名称”：“abc”，
“版本”：“1.0.42”，
“说明”：“反应组件库”，
“main”：“dist/bundle.js”，
“类型”：“dist/types/index.d.ts”，
“脚本”：{
“测试”：“玩笑”，
“构建：开发”：“npm全部运行——并行网页包：监视生成键入”，
“构建：生产”：“npm运行所有网页包：产品生成打字”，
“构建：清理”：“rmdir/Q/S dist”，
“生成类型”：“tsc--declaration--emitDeclarationOnly”，
“styleguide”：“npx styleguidist服务器”，
“样式向导：构建”：“npx样式向导构建”，
“webpack:watch”：“webpack--watch--mode=development”，
“webpack:prod”：“webpack--mode=production”，
“localVersion”：“node-p\”需要（'./package.json'）.version\“>localVersion.txt”，
“serverVersion”：“npm view@company/abc version>serverVersion.txt”
},
“存储库”：{
“类型”：“git”，
“url”：“url”
},
“关键词”：[
“反应”，
“组成部分”，
“打字脚本”
],
“作者”：“斯宾塞·库西诺”，
“许可证”：“ISC”，
“依赖性”：{
“@babel/core”：“^7.11.1”，
“@babel/plugin提案类属性”：“^7.10.4”，
“@babel/preset env”：“^7.11.0”，
“@babel/preset react”：“^7.10.4”，
“@babel/preset typescript”：“^7.10.4”，
“@fortawesome/fontawesome svg core”：“^1.2.28”，
“@fortawesome/free实心svg图标”：“^5.13.0”，
“@types/enzyme”：“^3.10.5”，
“@types/fetch mock”：“^7.3.2”，
“@types/jest”：“^24.9.1”，
“@types/nock”：“^10.0.3”，
“@types/node”：“^11.15.9”，
“@types/react”：“^16.9.0”，
“@types/react-dom”：“^16.9.0”，
“@types/react表”：“^6.8.7”，
“异步等待到”：“^1.2.4”，
“巴别塔加载器”：“^8.1.0”，
“css加载器”：“^1.0.1”，
“酶”：“^3.11.0”，
“酶-适配器-反应-16”：“^1.15.2”，
“获取模拟”：“^7.7.3”，
“文件加载器”：“^3.0.1”，
“身份obj代理”：“^3.0.0”，
“笑话”：“^25.3.0”，
“nock”：“^10.0.6”，
“节点提取”：“^2.6.1”，
“节点sass”：“^4.14.1”，
“npm全部运行”：“^4.1.5”，
“oidc客户端”：“^1.10.1”，
“powerbi报表组件”：“^1.6.0”，
“更漂亮”：“1.17.0”，
“反应”：“^16.14.0”，
“react docgen typescript”：“^1.20.1”，
“react dom”：“^16.14.0”，
“反应路由器”：“^5.1.2”，
“反应路由器dom”：“^5.1.2”，
“反应表”：“6.10.3”，
“反应平滑”：“^0.23.2”，
“反应微调器”：“^0.9.0”，
“react styleguidist”：“^11.1.5”，
“reactstrap”：“^8.4.1”，
“sass加载程序”：“^7.3.1”，
“ts玩笑”：“^25.4.0”，
“类型脚本”：“^3.8.3”，
“url加载程序”：“^1.1.2”，
“网页包”：“^4.44.1”，
Web包cli“^3.3.12”
},
“依赖项”：{
“@babel/plugin转换运行时”：“^7.12.1”，
“@babel/runtime”：“^7.12.5”，
“@company/abc”：“0.0.6”，
“@company/abc1”：“^1.2.0”，
“@company/abc2”：“^1.0.23”，
“@company/abc3”：“^1.9.1”，
“@company/abc4”：“^1.0.1”，
“核心js”：“^3.8.0”，
“日期fns”：“^1.30.1”，
“映射”：“^3.6.1”，
“反应引导”：“^0.32.3”，
“反应网格布局”：“^0.16.6”，
“反应脚本”：“^4.0.3”，
“反应选项卡”：“^3.1.1”，
“光滑转盘”：“^1.8.1”
},
“对等关系”：{
“反应”：“~16.8.4”，
“react dom”：“~16.8.4”，
“@types/node”：“^11.11.6”，
“节点提取”：“^2.3.0”，
“oidc客户端”：“^1.7.0”，
“powerbi报表组件”：“^1.1.3”，
“@fortawesome/fontawesome svg core”：“^1.2.17”，
“@fortawesome/free实心svg图标”：“^5.8.1”，
“反应平滑”：“^0.23.2”，
“反应微调器”：“^0.5.3”，
“reactstrap”：“^8.0.0”
},
“笑话”：{
“转变”：{
“^.+\.tsx？$”：“ts笑话”
},
“SetupFileAfterEnv”：[
“/testSetup.ts”
],
“moduleNameMapper”：{
“^.+\\（css | scss）$”：“身份obj代理”，
“^.+\\（svg）$”：“/src/mocks/fileMock.js”
},
“moduleFileExtensions”：[
“js”，
“jsx”，
“ts”，
“tsx”
],
“CollectionCoverage from”：[
***/context components/***.{js，jsx，ts，tsx}
]
}
}
任何帮助都将不胜感激。钩子可以在react组件内部调用，也可以在自定义钩子中调用。如果任何函数返回一些
jsx，那么它就是一个react组件 当涉及到钩子时，
react如果您想了解自定义挂钩，那么
.您能在出现错误的地方共享代码吗？{}}title=“title”>{（“警告”）}从库中获取此组件的错误。我没有在库中使用任何挂钩。实际使用类组件而不是功能组件。但是钩子在另一个库中使用，我在开发我的库时引用了这个库。那么这就是你的问题。所有javascript都会被传输，因此您应该使用支持React版本的包，或者升级React版本