从私有npm仓库导入React组件失败，如何让其从node_modules解析？

别着急，这种情况我碰到过好几次，咱们一步步来定位问题：

1. 先确认包是否真的安装成功 #

先去项目根目录的node_modules文件夹里找@myorg目录，看看里面有没有testcomponent文件夹。如果没有，说明安装过程本身就有问题：

• 检查npm源配置：执行npm config get registry，如果你的私有包托管在私有仓库，要确保当前npm源或者针对@myorg的源指向了私有仓库（可以在项目根目录建.npmrc文件，写@myorg:registry=https://你的私有仓库地址）
• 重新执行npm install --save @myorg/testcomponent，仔细看安装日志，有没有权限错误、仓库认证失败这类提示

2. 检查私有包的package.json配置（最容易踩坑） #

你的私有包必须正确声明入口文件，否则React找不到它：

• 打开node_modules/@myorg/testcomponent/package.json，查看main字段，它应该指向编译后的入口文件（比如dist/index.js或者lib/index.js）
• 如果你的包是ES模块编写的，最好加上module字段，create-react-app会优先识别这个字段
• 还要确认files字段是否包含了需要发布的文件（比如dist目录），如果没配置这个字段，可能编译后的文件根本没被传到npm仓库里

举个正确的私有包package.json示例：

{
  "name": "@myorg/testcomponent",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "files": ["dist"]
}

3. 排查项目侧的小问题 #

有时候是一些小细节导致的：

• 重启开发服务器：执行npm start重启，缓存偶尔会引发奇怪的解析问题
• 检查导入拼写：Linux/macOS下文件名区分大小写，要是你的包入口文件是TestComponent.js，导入时写成小写就会报错
• 确认项目的node_modules路径：有没有不小心把node_modules放到了src目录里？不过这种情况很少见

4. 私有仓库的认证问题 #

如果你的私有仓库需要认证，要确保本地npm已经登录了对应仓库：

• 执行npm login --registry=https://你的私有仓库地址，输入账号密码完成认证，再重新安装包

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