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

Solve having more than one copy of React in the same app(解决在同一应用程序中有多个Reaction副本的问题)

本文介绍了解决在同一应用程序中有多个Reaction副本的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在本地开发一个Reaction模块。为此,我使用npm link链接我的模块。 模块已成功导入,但模块内部的挂钩失败。它引发以下错误:

挂钩调用无效。钩子只能在 功能组件。以下情况之一可能会发生这种情况 原因:1.您可能有不匹配的Reaction和 渲染器(如Reaction DOM)2。您可能违反了 钩子3.您可能在同一个应用程序中有多个Reaction副本 请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何 调试并修复此问题。

查看React docs上的建议,我可以确认我的应用程序正在使用Reaction的重复版本,因为以下代码返回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

This issue充满了建议,但它们令人困惑。我如何才能解决它?

注意:我没有违反挂钩规则,该错误仅在从应用程序导入模块时出现。

推荐答案

在您正在开发的模块中,将冲突的包添加到peerDependencies(并从dependenciesdevDependencies中删除它们):

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

在您的模块中执行npm install

现在将它们添加到您的模块的webpack配置中,作为externals。这些包不应包含在模块捆绑包中(使用该模块的应用程序将提供它们):

// 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"
        }
    },
};

然后,在构建模块后,在应用程序中您可以检查两个版本现在是否相同:

// 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 :)

这篇关于解决在同一应用程序中有多个Reaction副本的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:解决在同一应用程序中有多个Reaction副本的问题

基础教程推荐