Lerna绑定依赖包后Next.js项目无法在3000端口启动

• Lerna软链接依赖默认不被Next.js编译：执行lerna bootstrap后，本地@brunamendes/components包会以软链接形式出现在project1的node_modules目录下，Next.js默认webpack规则不会转译node_modules内的文件，直接解析未编译的组件包会抛出语法错误，直接导致服务启动失败。
• components包入口配置矛盾：components包的package.json中main字段声明入口为dist/index.js，但files字段仅配置了lib目录，且未提前执行构建命令生成dist目录产物，引入依赖时会直接触发模块不存在报错。
• React多实例冲突：components包将react放在devDependencies中，软链接后项目内会存在两份独立的React副本，触发React的Hook规则校验错误，直接阻断服务启动。

1. 修正components包配置
   修改packages/components/package.json，将react、react-dom移到peerDependencies避免多实例问题，同时统一入口配置，开发阶段直接指向源码省去重复构建步骤：

{
  "name": "@brunamendes/components",
  "version": "0.0.0",
  "description": "React公共组件包",
  "author": "brunamendes-02 <bruna.kcn@gmail.com>",
  "license": "ISC",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: run tests from root\" && exit 1",
    "dev": "microbundle watch --jsx React.createElement lib/*.js",
    "build": "microbundle --jsx React.createElement lib/*.js"
  },
  "peerDependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "microbundle": "^0.15.0"
  }
}

2. 配置Next.js支持本地链接包
   在project1根目录新建next.config.js，添加webpack配置，让Next.js编译components包源码，同时强制全局使用同一份React实例：

// packages/project1/next.config.js
const path = require('path')
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    // 加入本地components包的编译规则
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: [path.resolve(__dirname, '../components')],
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['next/babel']
        }
      }
    })
    // 统一React实例，解决多副本冲突
    config.resolve.alias['react'] = path.resolve(__dirname, 'node_modules/react')
    config.resolve.alias['react-dom'] = path.resolve(__dirname, 'node_modules/react-dom')
    return config
  }
}

module.exports = nextConfig

3. 重启服务
   在项目根目录依次执行以下命令清理旧依赖并重启：

lerna clean -y
lerna bootstrap
lerna run dev

执行完成后即可正常通过localhost:3000访问project1服务，components包的代码修改也会支持热更新。

注意：如果project1使用Next.js 13.1及以上版本，可以不用手写webpack规则，直接在next.config.js中添加transpilePackages: ['@brunamendes/components']即可实现本地链接包的转译。

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