IT技术 - 解决在同一个应用程序中拥有多个 React 副本的问题 - 吾爱随笔录

解决在同一个应用程序中拥有多个 React 副本的问题

IT技术 javascript reactjs npm webpack package.json

2021-05-16 17:05:05

我正在本地开发一个 React module。为此，我正在使用npm link. module已成功导入，但module内部的挂钩失败。它抛出以下错误：

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你的 React 和渲染器的版本可能不匹配（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用程序请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何调试和解决此问题的提示。

检查React docs 中的建议，我可以确认我的应用程序正在使用 React 的重复版本，因为以下代码返回 false：

// node_modules/mymodule/src/index.js
export { default as ReactFromModule } from 'react'

// src/index.js
import React from 'react'
import { ReactFromModule } from 'mymodule'
console.log(React === ReactFromModule) //false

这个问题充满了建议，但它们令人困惑。我该如何解决？

注意：我没有违反钩子规则，错误仅在从应用程序导入module时出现。

3个回答

在您正在开发的module中，将冲突的包添加到peerDependencies（并从dependencies或中删除它们devDependencies）：

  // package.json
  "peerDependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },

npm install在您的module中执行。

现在，将它们添加到的配置的WebPack你的module作为externals。这些包不应包含在module的捆绑包中（使用该module的应用程序将提供它们）：

// webpack.config.js
module.exports = {
    /*
    rest of config...
    */
    output: {
        filename: "index.js",
        pathinfo: false,
        libraryTarget: 'umd', // In my case, I use libraryTarget as 'umd'. Not sure if relevant
    },
    externals: {
        // Use external version of React
        "react": {
            "commonjs": "react",
            "commonjs2": "react",
            "amd": "react",
            "root": "React"
        },
        "react-dom": {
            "commonjs": "react-dom",
            "commonjs2": "react-dom",
            "amd": "react-dom",
            "root": "ReactDOM"
        }
    },
};

然后，在构建module后，在您的应用程序中，您可以检查两个版本现在是否相同：

// node_modules/mymodule/src/index.js
export { default as ReactFromModule } from 'react'

// src/index.js
import React from 'react'
import { ReactFromModule } from 'mymodule'
console.log(React === ReactFromModule) // true :)

作为对另一条评论的回应，仅仅将 React 移至 peerDependencies 并不能充分解决所有情况下的问题。我会直接回复那个评论，但是 StackOverflow 需要更多的声誉来回应错误的答案而不是发布它们。

我有一个使用 Webpack 构建的共享 React 组件module，但遇到了同样的问题。我在下面的评论中概述了一个可能的修复方法，它需要修改 peerDependencies 并以类似于 mtkopone 共享的答案的方式使用 npm 链接。 https://github.com/facebook/react/issues/13991#issuecomment-841509933

我的解决方案有点老套，我不推荐长期使用。如果您正在使用 Webpack（您将这个问题标记为），本文可能会详细介绍一个更永久的解决方案（https://medium.com/codex/duplicate-copy-of-react-errors-when-using-npm-link -e5011de0995d）。我还没有尝试过，但作者似乎已经尝试了所有（不正确的）解决方案，并且在尝试构建共享组件库时也遇到了钩子问题。

那篇文章的作者正在尝试调试 Create-React-App 应用程序。虽然 CRA 在幕后使用 webpack，但您无法直接访问 webpack.config，因此作者必须执行一些变通方法才能这样做。如果您不使用 CRA，而只是使用普通的 Webpack，那么您可以考虑使用 webpack.config 的 resolve.alias 部分来确保没有重复的 React 副本（请参阅：https ://blog.maximeheckel.com/posts /duplicate-dependencies-npm-link/ )

添加reactand react-domas peerDependenciesinpackage.json对我不起作用。

我不得不在 webpack 配置文件中添加一个别名：

// webpack.config.js
resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
}

其它你可能感兴趣的问题

上一篇create-react-app .env：进程未定义下一篇react材料表自动页面大小