创建Next组件包时遇到奇怪的模块未找到错误求助

以下是针对你遇到的next/image模块找不到错误的排查和解决步骤：

• 清理组件包构建残留
  即使你删除了源码中使用next/image的组件，旧的构建产物可能还保留着相关引用。执行以下操作：

  1. 在组件包项目中删除node_modules和构建输出目录（比如lib或dist）
  2. 重新安装依赖并构建：npm install && npm run build
  3. 重新发布更新后的包：npm publish

• 清理消费项目依赖缓存
  消费项目可能缓存了旧版本的组件包，导致错误残留：

  1. 删除消费项目的node_modules和锁文件（package-lock.json或yarn.lock）
  2. 重新安装依赖：npm install（或yarn install）

• 配置组件包的peerDependencies
  在组件包的package.json中添加next作为peer依赖，确保消费项目提供正确的next版本，避免组件包自身打包或依赖冲突：

  "peerDependencies": {
    "next": "^13.x || ^14.x"
  }
  

  同时确保dependencies中没有next（如果之前不小心安装了，执行npm uninstall next移除）

• 检查构建工具的外部依赖配置
  如果使用Rollup、Webpack等工具构建组件包，需要将next相关模块标记为外部依赖，避免打包到组件中：

  • Rollup示例配置：

    export default {
      // 其他配置...
      external: ['next', 'next/image', 'next/link']
    }
    

  • Webpack示例配置：

    module.exports = {
      // 其他配置...
      externals: {
        next: 'commonjs next',
        'next/image': 'commonjs next/image',
        'next/link': 'commonjs next/link'
      }
    }
    

• 验证构建产物
  直接打开消费项目中node_modules/@myscope/shared-components/lib/index.esm.js文件，搜索next/image，确认是否还有残留的导入语句。如果有，说明构建过程未正确更新产物，需要检查构建脚本是否正确执行了清理和重新编译。

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