React应用本地安装自定义npm包时出现Module not found: Can't resolve错误

我来帮你分析下这个Module not found: Can't resolve 'test-app-npm'错误的核心原因，以及对应的解决办法：

核心原因1：npm包的main字段指向错误 #

看你的testnpm包的package.json，main字段设置为"index.js"，但你的webpack配置明确把打包后的文件输出到了build/index.js里。这就导致React应用会去查找包根目录的index.js，但实际上这个文件根本不存在（你的源码在src/index.js，编译产物在build文件夹），自然会触发找不到模块的错误。

核心原因2：可能未执行npm包的构建命令 #

如果你的testnpm包还没运行npm run build生成build文件夹，那就算main字段改对了，也找不到可被导入的编译产物文件。

额外检查点：本地包安装路径是否正确 #

虽然你的testapp/package.json里写了"test-app-npm": "file:../testnpm"，但要确保两个文件夹确实是同级结构：

├── testnpm/
└── testapp/

如果路径层级不对，也会导致安装后的包无法被正确识别。

具体解决步骤 #

1. 修正npm包的package.json的main字段 #

打开testnpm/package.json，把main字段改成打包后的文件路径：

"main": "./build/index.js",

2. 完成npm包的构建 #

进入testnpm文件夹，执行构建命令生成编译产物：

npm run build

执行完成后，你会看到testnpm目录下多出一个build文件夹，里面有打包好的index.js。

3. 重新安装本地包（推荐操作） #

进入testapp文件夹，先卸载已安装的包，再重新安装：

npm uninstall test-app-npm
npm install ../testnpm

或者直接强制更新安装：

npm install ../testnpm --force

4. 验证导入是否正常 #

在testapp/src/App.js里导入你的组件，比如：

import { YourComponent } from 'test-app-npm';

然后启动React应用：

npm start

这时候应该就能正常加载本地npm包的模块了。

内容的提问来源于stack exchange，提问作者Arun Dinesh