我有一個我正在處理的 NPM 包，它依賴于react. 然后我有一個react作為依賴項安裝的測驗應用程式。當我將我的 npm 包匯入測驗應用程式時，我收到以下錯誤：
無效的掛鉤呼叫。鉤子只能在函陣列件的主體內部呼叫。這可能由于以下原因之一而發生：
- 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
- 您可能違反了 Hooks 規則
- 你可能在同一個應用程式中擁有多個 React 副本
在我的測驗應用程式中運行npm ls react表明我可能有以下副本react：
test-app@0.1.0
├─┬ @package-name/react@1.0.0 -> ./../package-name-react
│ ├─┬ react-dom@17.0.2
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 // <----------------
├─┬ next@12.1.0
│ ├── react@17.0.2 deduped
│ ├─┬ styled-jsx@5.0.0
│ │ └── react@17.0.2 deduped
│ └─┬ use-subscription@1.5.1
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
└── react@17.0.2 // <----------------
我的 npm 包的 package.json 如下所示：
{
"name": "@package-name/react",
"version": "1.0.0",
"description": "",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"files": [
"dist"
],
"types": "dist/index.d.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rimraf dist",
"build": "npm run clean && rollup -c"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^20.0.0",
"@rollup/plugin-node-resolve": "^13.0.4",
"@rollup/plugin-typescript": "^8.2.5",
"rimraf": "^3.0.2",
"rollup": "^2.56.2",
"rollup-plugin-dts": "^3.0.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.1",
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.3.5"
},
"dependencies": {
"socket.io-client": "^4.4.1"
},
"peerDependencies": {
"react": "17.0.2",
"react-dom": "17.0.2"
}
}
When I remove react and react-dom from peerDependencies, the error goes away but causes other issues. It's almost like peerDependencies are being installed and rolled up in my package.
My component in my package is very simple at this stage and is like so:
const MyComponent = ({
children
}) => {
const [myValue, setValue] = useState(false);
useEffect(() => {
setFlagValue(true)
}, []);
return (
<>
{children}
</>
)
};
I am then consuming this package in my test app like so:
import { MyComponent } from "package-name/react";
const MyApp = () => {
<MyComponent>
<div>Hello world</div>
</MyComponent>
}
Rollup config:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
const packageJson = require('./package.json');
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
name: 'react-ts-lib'
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true
}
],
plugins: [
external(),
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' }),
postcss(),
terser()
],
},
{
input: 'dist/esm/types/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: "esm" }],
external: [/\.css$/],
plugins: [dts()],
},
]
uj5u.com熱心網友回復：
從問題描述中并不清楚，但是查看 repo，我看到包是在本地安裝的。
"dependencies": { "next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2", "react-ts-lib": "file:../react-ts-lib" },
這意味著 lib 代碼仍然react使用它自己的node_modules（本地安裝的）而不是應用程式依賴項來決議。
解決此問題的一種方法是使用create-react-library 之類的東西設定 lib 專案，它明確地解決了這個問題：
如果您在專案中使用 react-hooks，則在除錯示例時可能會遇到例外 Invalid Hook Call Warning。此問題 解釋了原因，您的 lib 和示例使用不同的實體，一種解決方案是將
react示例 [app] 中的路徑重寫package.json為'file:../node_modules/react'or'link:../node_modules/react'。
請注意，在您的情況下，您可以簡單地將react庫中的路徑更改devDependencies為指向應用程式的react：
"devDependencies": {
"@rollup/plugin-commonjs": "^20.0.0",
"@rollup/plugin-node-resolve": "^13.0.4",
"@rollup/plugin-typescript": "^8.2.5",
"@types/react": "^17.0.18",
"react": "file:../my-app/node_modules/react",
或者反過來，取決于什么是最有意義的。
還有其他方法可以進行 React 庫的本地開發：
- 通過將依賴關系提升到根目錄，紗線 monorepo使這更容易處理。
- 如何在開發程序中將本地 React 庫與本地 React 專案鏈接？
- 將您的庫發布到 github 或 npm 存盤庫，以便將其安裝到您的應用程式中。
這看起來與您用來搭建專案的教程相同。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/442288.html
標籤：javascript node.js reactjs npm rollup