时间戳

首页 > 解决方案 > RollupJS 库 React Hook 错误 useState

javascript - RollupJS 库 React Hook 错误 useState

问题描述

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

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 link 进行开发，导致在生产构建时发生此错误，这是我的参考https://reactjs.org/warnings/invalid-hook-call-warning。 html#重复反应

此策略不适用于汇总堆栈，我尝试链接反应并进行一些配置，但没有任何效果

那是我的 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 组件，它将触发一个反应钩子错误:(

标签： javascriptrollupjs

解决方案

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

对 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"
},

希望这可以帮助。:)

推荐阅读