React Native：npm链接本地依赖，无法解析模块

Posted 2023-02-16

【中文标题】React Native：npm链接本地依赖，无法解析模块

【英文标题】：React Native: npm link local dependency, unable to resolve module

【发布时间】：2017-10-19 01:24:58

【问题描述】：

我正在为 react native 开发一个按钮 ui 包。我尝试构建一个示例项目来测试这个按钮。目录结构如下：

my-button/
    package.json
    index.js
    example/
        package.json
        index.js

我尝试使用npm link：

cd my-button
npm link

cd example
npm link my-button

在example/node_modules/ 可以看到my-button 符号链接，VSCode 也可以在my-button 包中自动完成功能。

但执行示例应用程序会显示错误：

Unable to resolve module my-button ...
Module does not exist in the module map or in these directories: ...

但是错误信息中的路径是正确的。

不知道自己哪里错了，还是在 React-Native 中有什么特殊的方式来处理链接本地依赖？

我也试过npm install file:../.。它以这种方式工作正常，但在我编辑 my-button 后更新 example/ 中的依赖项并不容易。

【问题讨论】：

你最终找到了解决方案还是 React Native 不支持本地 npm 包？

您找到解决方案了吗？

【参考方案1】：

npm link 命令不起作用，因为 React Native 打包程序 doesn't support symlinks。

经过一番研究，我发现有两种方法可以解决。

在示例应用程序中使用haul packager。 Haul 支持符号链接，因此您可以照常使用npm link。 通过file:../ 使用本地依赖，然后编辑node_modules 文件夹中的文件或在每次更改时重新安装。

我发现Haul 非常适合这个用例，甚至设置了一个little starter project，其中还包括storybook，如果你有很多组件要切换，这真的很有帮助。

【讨论】：

我刚刚用一个现有项目测试了 haul，但它不工作，似乎没有维护

Haul 已演变为github.com/callstack/repack

第二个选项对我不起作用:(

【参考方案2】：

试试 wml (https://github.com/wix/wml)

它是 npm link 的替代方案，实际上将更改的文件从源文件夹复制到目标文件夹

# add the link to wml using `wml add <src> <dest>`
wml add ~/my-package ~/main-project/node_modules/my-package

# start watching all links added
wml start

【讨论】：

确保关闭您现有的 Metro Bundler 打包程序实例，并让 React Native 在您下一个 react-native run-***** 命令时启动一个新实例。否则，您将不断收到 OP 描述的错误。

wml 还维护吗？该存储库自 2017 年以来没有任何贡献。

如果有人在使用此解决方案，并且在链接 node_modules 时遇到问题，在开始使用 wml start 之前，请确保从 .watchmanconfig 文件中的忽略列表中删除“node_modules”由wml

创建

@pmiranda 你能完成这项工作吗？我认为现在的答案已经过时了。

【参考方案3】：

我在围绕现有原生 SDK 开发原生模块包装器时遇到了同样的问题。起初我按照@aayush-shrestha 的建议在本地安装包。像这样：

npm install ../<package-folder> --save

只要我通过NativeModules 引用该模块，它就可以工作。导入它：

import  NativeModules  from 'react-native';

然后像这样访问一个名为 ActualModuleName 的模块：

NativeModules.ActualModuleName

但是当我尝试按名称导入模块时它失败了：

import  ActualModuleName  from 'react-native-actualmodulename'

为了完成这项工作，我必须先打包。在包的根目录中运行：

npm pack

这会生成一个压缩包：

react-native-actualmodulename-1.0.0.tgz

现在在您的应用中安装它：

npm install <path/to>/react-native-actualmodulename-1.0.0.tgz

这样做的一个巨大缺点是每次对模块进行更改时都必须重新打包包。我知道的唯一解决方法是直接修改 node_modules 中的包文件，然后在完成后将这些更改复制回您的仓库。

但好处是您的应用程序的源代码可以导入ActualModuleName，就像您通过npm 发布它后导入它一样；不需要特定于环境的代码。

【讨论】：

安装pod依赖失败，npm install .tgz文件。

@girish_pro pod 依赖仍然需要单独安装；在打包扩展之前在ios 目录中运行pod install

@wayne_burkett pod install 未安装子依赖项。我的 .tgz 文件依赖于需要 node_module 和 Pod 的 react-native-branch。但是当我直接在ios文件夹中添加.tgz文件和pod install时，它没有安装react-native-branch pod，只有node_module。

【参考方案4】：

我不能总是让它与纱线链接一起工作。我发现特别有用的是yalc:

首先永久安装一次全局：

npm install -g yalc

在本地库/包中（我称之为my-local-package），然后运行：

yalc publish

然后在使用 my-local-package 作为依赖项的项目中，运行： （如果你已经用其他方式添加了，请先卸载（npm uninstall -S my-lockal-package）

yalc add my-local-package
npm install

如果 my-local-package 是本机模块，则运行 react-native run-android 以链接依赖项。 （或运行-ios）

如果您对 my-lockal-package 进行任何更改，则：

cd path/of/my-local-package
yalc push //updates the local package
cd path/to/my-project
npm install
react-native run-android (or run-ios)

如果尚未应用更新，请尝试cd android && ./gradlew clean && cd ..，然后重新运行：react-native run-android。

【参考方案5】：

遇到了同样的问题。虽然我无法让npm link 正常工作，但我通过在项目文件夹中安装本地包来解决它

npm install ../<package-folder> --save

这将像常规软件包一样安装软件包，但从本地文件夹安装。 缺点是您对包所做的更改不会被反映。每次更改后您都必须npm install。

【讨论】：

它不起作用。我看到 node_modules 中包含的包，但是当我运行应用程序时，它给出了错误 Module 'xyz' does not exist in the Haste module map

这可能是该命令在node_modules 下创建了一个符号链接，例如 React Native 不适用于它们。相反，试试这个：npm install $(npm pack <folder> | tail -1)。来源：***.com/a/54588310

【参考方案6】：

更改你的 package.json

//...
"dependencies": 
   //...
    "my-button" : "file:../"
  ,
//...

【讨论】：

我已经尝试过这种方法，这种方法会将整个项目复制到example/node_modules，而不仅仅是一个符号链接。更新依赖不是很方便。

这个解决方案对我们来说是完美的，但我们仍然得到相同的module not found 错误。有什么想法吗？

【参考方案7】：

我遇到了同样的问题。

我尝试使用 npm 安装本地模块，但一直遇到无法解析模块的问题，即使我可以看到 node_modules 中的文件夹以及类和方法名称的自动完成功能。

在 github 上看到这个打开的 issue 后，我能够通过使用 yarn 而不是 npm 安装本地库来绕过它。问题已于 2020 年 9 月开放，目前 Facebook 尚未发表评论。

【讨论】：

你能否让它与 Yarn 一起工作？不幸的是，我不能

@iRohitBhatia 是的，我可以使用 Yarn 安装它。您面临的问题是什么？

与 OP 相同。我将在周末分享更多细节。谢谢顺便说一句:)

【参考方案8】：

您可以通过 Metro 使用 npm 链接。只需将链接包的源文件夹添加到您的metro.config.js 中的watchFolders。

【参考方案9】：

对于那些仍在寻找没有其他依赖的简单解决方案的人，试试这个：

yarn --version
1.21.1

npm --version
6.13.4

在项目根目录中安装

cd my-button
yarn install or npm install

在我的按钮中注册链接

yarn link or npm link

安装示例项目

cd example
yarn add ../ or npm add ../

链接到我的按钮

yarn link my-button or npm link my-button

完成 pod 安装（如有必要）

cd ios
pod install

【讨论】：

我正在使用 React Native 很好。如果它不适合你并不意味着它根本不工作。谢谢你的反对。

这不正是 OP 所做的吗？

【参考方案10】：

尝试运行

npm run watch

在按钮包内。目前，我正在使用它将库中的更改应用到我的主项目。请让我知道它是否有效！