发布
社区首页 >问答首页 >链接react-app和本地npm包的挂钩调用警告无效

链接react-app和本地npm包的挂钩调用警告无效
EN

Stack Overflow用户
提问于 2019-09-07 00:08:33
回答 3查看 3.1K关注 0票数 11

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

代码语言:javascript
代码运行次数:0
复制
cd <my-npm-package>
npm link 
cd <my-react-app>
npm link my-npm-package

它工作得很好,但是如果我不使用任何使用react钩子的东西。但是,一旦我在my-npm-package项目中使用了像useState()这样的东西,它就会出现一些错误,我的应用程序就无法运行。

我做了很多研究,但对我有效的唯一解决方案是使用以下命令安装我的软件包

代码语言:javascript
代码运行次数:0
复制
cd <my-npm-package>
npm npm pack
cd <my-react-app>
npm install ../my-npm-package/my-npm-package-1.0.0.tgz

我理解这个问题是因为react的多个版本相互干扰。但我不知道如何修复它。

这是一个已知问题,更多信息请参阅https://github.com/facebook/react/issues/13991

但我是新手,对npm的解决方案也不太了解。

包的package.json

代码语言:javascript
代码运行次数:0
复制
{
  "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中使用的代码

代码语言:javascript
代码运行次数:0
复制
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得到的结果

EN

回答 3

Stack Overflow用户

发布于 2020-01-30 09:00:21

我在NPM包创建中使用useEffectuseState时遇到了完全相同的问题。

我一步一步地按照React文档中的说明找到了here

文档的这一部分给了我解决方案:

当你使用npm link或类似的链接时,也会出现这个问题。在这种情况下,您的捆绑器可能会“看到”两个反应-一个在应用程序文件夹中,另一个在库文件夹中。假设myapp和mylib是兄弟文件夹,一种可能的修复方法是从mylib运行npm link ../myapp/node_modules/react。这将使库使用应用程序的React副本。

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

要进行更新,请使用包目录中的npm run build,它应该会立即更新。

票数 14
EN

Stack Overflow用户

发布于 2020-05-04 17:10:06

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

我通过从本地npm包和react应用程序的node_modules中删除react修复了这个问题。

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

我使用npm link指向本地npm包和摄取react应用程序,以使用react installed only目录中的react。

票数 1
EN

Stack Overflow用户

发布于 2019-09-07 00:44:56

钩子规则lint规则使用命名约定来判断代码是组件、钩子还是其他东西。以大写字母开头的函数被假定为组件。以use开头的函数被假定为钩子。其他一切都被假设为两者都不是。

由于您将函数命名为test,因此它假定它既不是组件也不是钩子,因此不允许在其中使用钩子。如果是组件,则将名称更改为Test;如果是自定义挂钩,则将名称更改为useTest

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57825421

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档