RollupJS库React钩子错误useState

Question

我正在构建一个库，它允许将react组件导出到nextjs应用程序，第一次它工作得很好，但当我开始检查该库上react挂钩时，它触发了一个无效挂钩错误

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.

为了解决类似于在webpack和微束上的问题，我使用npm link进行开发，因为在生产构建时会出现这个错误，那是我的参考https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

这种策略在汇总堆栈上不起作用，我尝试将react链接并执行一些配置，但什么都不起作用

那是我的rollup.config.js

import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import resolve from 'rollup-plugin-node-resolve'
import external from 'rollup-plugin-peer-deps-external'

import { terser } from 'rollup-plugin-terser'

import styles from "rollup-plugin-styles";

const input = 'src/index.js'
const output = 'dist/index'


export default [
  {
    input: input,
    external: ['react', 'react-dom'],
    output: {
      file: `${output}.modern.js`,
      format: 'es',
    },
    plugins: [
      external('./package.json'),
      resolve(),
      commonjs({
        include: ['node_modules/**'],
      }),
      babel({
        exclude: 'node_modules/**'
      }),
      styles(),
      terser()
    ],
  },
]

那是我的package.json

{
  "name": "project",
  "version": "0.0.17",
  "description": "",
  "private": true,
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
  "umd:main": "dist/index.umd.js",
  "source": "src/index.js",
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "rollup -c --environment BUILD:production",
    "watch": "rollup -c --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@webpack-cli/init": "^1.0.2",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "microbundle-crl": "^0.13.11",
    "mini-css-extract-plugin": "^1.2.1",
    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "rimraf": "^3.0.2",
    "rollup": "^2.32.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-sass": "^1.2.2",
    "rollup-plugin-scss": "^2.6.1",
    "rollup-plugin-styles": "^3.11.0",
    "rollup-plugin-terser": "^6.1.0",
    "rollup-plugin-uglify": "^6.0.4",
    "sass-loader": "^10.0.4",
    "source-map-loader": "^1.1.1",
    "static-site-generator-webpack-plugin": "^3.4.2",
    "style-loader": "^2.0.0"
  },
  "peerDependencies": {
    "react": "17.0.1",
    "prop-types": "15.7.2",
    "react-dom": "17.0.1"
  },
  "dependencies": {
    "file-loader": "^6.2.0"
  }
}

当我在开发模式下修改我的nextjs应用程序，删除一个测试useState组件时，它可以工作，但如果我重新加载页面或直接加载呈现的useState组件，它将触发一个react钩子错误:(

Answer 1

我找到了我的案子的原因。

package.json文件上的peerDependencies设置是必需的。

"peerDependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2"
},

因此，您尝试依赖于peerDependencies。

"peerDependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "file-loader": "^6.2.0"
},

希望这能有所帮助。:)