无效的挂机呼叫警告链接react-app和本地npm软件包

Question

我想通过使用npm link链接我的项目来调试正在创建的npm软件包。

cd <my-npm-package>
npm link 
cd <my-react-app>
npm link my-npm-package

它工作正常，但是如果我不使用任何使用react hooks的东西。 但是，一旦在my-npm-package项目中使用useState()之类的东西，就会引发一些错误，并且我的应用程序无法运行。

我做了很多研究，但是唯一适合我的解决方案是使用

安装我的软件包

cd <my-npm-package>
npm npm pack
cd <my-react-app>
npm install ../my-npm-package/my-npm-package-1.0.0.tgz

我了解问题是由于反应的多个版本相互干扰。但是我不知道如何解决它。

它是一个已知问题，有关详细信息，请参见https://github.com/facebook/react/issues/13991

但是我对这npm东西还是陌生的，并且不太了解解决方案。

软件包的package.json

{
  "name": "my-npm-package",
  "version": "1.0.1",
  "description": "Test npm package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "socram",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0"
  },
  "peerDependencies": {
    "react": "^16.9.0"
  },
  "dependencies": {}
}

index.js中使用的代码

import React, {useState} from "react"

export function test() {
    const [item, setItem] = useState("TEST")
    console.log(item);
    return setItem;
}

用于测试的react应用是使用npx create-react-app my-app

新建的react项目

解决此问题的最佳方法是什么？我不想每次更改内容后先运行npm pack，然后再运行npm install xxx...。

这是一个更好的解决方案，然后每次都将其发布到npm。但是必须有一个更好的解决方案。

使用npm link的结果

使用npm pack的结果

Answer 1

在NPM软件包创建中使用useEffect和useState时，我遇到了完全相同的问题。

我按照here

的步骤逐步遵循了React文档中的说明

文档的这一部分为我提供了解决方案：

当您使用npm链接或等效链接时，也会出现此问题。 在这种情况下，您的捆绑程序可能会“看到”两个Reacts-一个在应用程序中 文件夹和库文件夹中的一个。假设myapp和mylib是 兄弟文件夹，一种可能的解决方法是运行 npm链接 ../ myapp / node_modules / react 。这应该使图书馆 使用应用程序的React副本。

链接到项目所在的目录后，可以在软件包目录中使用npm link，在目录项目中使用npm link <your-app>。

要进行更新，请在软件包目录中使用npm run build，它应该立即更新。

Answer 2

我在尝试将本地npm react组件库导入React应用程序时遇到了相同的问题。

我通过从本地npm软件包和react应用程序中的node_modules中删除react来解决了这个问题。

然后我在与这两个项目相同的级别上创建了另一个目录。在该目录中，我运行npm init -y，然后安装react。

我使用npm link来指向本地npm软件包和摄取的React应用程序，以使用仅来自此react安装目录的react。

Answer 3

钩子规则lint规则使用命名约定来告诉代码是组件，钩子还是其他东西。以大写字母开头的功能被认为是组件。以plays开头的函数被认为是钩子。假定其他一切都不是。

自从您为函数use命名以来，它就假定它既不是组件也不是钩子，因此不允许在其中使用钩子。如果是组件，则将名称更改为test，如果是自定义钩子，则将名称更改为Test。

Answer 4

您可以将库代码复制到主应用程序中并进行调试。一切正常后，制作程序包