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和microbundle上的问题，我使用npm链接进行开发，导致此错误在生产版本中发生，这是我的参考文献https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-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组件进行加载，则会触发反应挂钩错误：（

RollupJS库React Hook错误useState

0 个答案: