我想通过使用npm link
链接我的项目来调试我创建的npm包。
cd <my-npm-package>
npm link
cd <my-react-app>
npm link my-npm-package
它工作得很好,但是如果我不使用任何使用react钩子的东西。但是,一旦我在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
我理解这个问题是因为react的多个版本相互干扰。但我不知道如何修复它。
这是一个已知问题,更多信息请参阅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
得到的结果
发布于 2020-01-30 09:00:21
我在NPM包创建中使用useEffect
和useState
时遇到了完全相同的问题。
我一步一步地按照React文档中的说明找到了here
文档的这一部分给了我解决方案:
当你使用npm link或类似的链接时,也会出现这个问题。在这种情况下,您的捆绑器可能会“看到”两个反应-一个在应用程序文件夹中,另一个在库文件夹中。假设myapp和mylib是兄弟文件夹,一种可能的修复方法是从mylib运行npm link ../myapp/node_modules/react。这将使库使用应用程序的React副本。
链接到项目所在的目录后,可以在包目录中使用npm link
,在目录项目中使用npm link <your-app>
。
要进行更新,请使用包目录中的npm run build
,它应该会立即更新。
发布于 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。
发布于 2019-09-07 00:44:56
钩子规则lint规则使用命名约定来判断代码是组件、钩子还是其他东西。以大写字母开头的函数被假定为组件。以use
开头的函数被假定为钩子。其他一切都被假设为两者都不是。
由于您将函数命名为test
,因此它假定它既不是组件也不是钩子,因此不允许在其中使用钩子。如果是组件,则将名称更改为Test
;如果是自定义挂钩,则将名称更改为useTest
。
https://stackoverflow.com/questions/57825421
复制相似问题