Next.js项目导入fork修改后的react-headroom包提示模块未找到报错

问题根因 #

你直接通过git仓库地址安装依赖时，yarn拉取的是仓库里的源码文件。从你提供的package.json可以看到，这个包的入口文件配置是"main": "dist/index.js"，而开源库通常会把编译后的dist目录加入.gitignore，不会提交到git仓库，因此安装后找不到入口文件，报模块不存在错误。

解决方案 #

你可以选择以下任意一种方法解决：

• 方法1：提交编译产物到自己的fork仓库
  1. 到你fork的react-headroom本地目录，删除.gitignore中关于dist目录的忽略规则
  2. 执行npm run build编译生成dist目录
  3. 将dist目录的改动commit并push到你的远程git仓库
  4. 项目中重新安装该依赖即可
• 方法2：添加prepare自动编译脚本（更推荐，无需提交dist目录）
  1. 在你fork的react-headroom的package.json的scripts字段中新增一行：

     "prepare": "npm run build"
     

  2. 将这个改动commit并push到你的远程git仓库
  3. 项目中重新安装该依赖，yarn安装git依赖时会自动执行prepare脚本完成编译，生成所需的dist入口文件
• 临时验证方法：直接引入源码
  如果你只是临时测试，可以暂时修改导入语句直接指向源码文件：

  import Headroom from 'react-headroom/src/index.js'
  

  注意该方法需要Next.js配置转译node_modules下的react-headroom包，否则可能因为语法兼容问题报错，不建议长期使用。

额外注意项 #

原包的peerDependencies限制了React版本为^16.3.0 || ^17，如果你项目使用的是React 18，可以在package.json中修改peerDependencies的React版本限制，避免安装时的版本不匹配警告。

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