使用Lerna+Next.js搭建Monorepo时出现Module not found报错如何解决

问题原因排查及解决方案 #

你遇到的Module not found: Can't resolve 'components'错误是Monorepo下本地包链接、构建、转译三个常见环节配置缺失导致的，按以下步骤逐一校验即可解决：

1. 校验Lerna依赖链接配置

首先确认根目录lerna.json中配置了包扫描规则，示例如下：

{
  "packages": ["packages/*"],
  "version": "independent"
}

配置完成后在根目录执行lerna bootstrap，Lerna会自动将本地components包软链到frontend的node_modules目录下。
如果用的是npm 7+/yarn，也可以直接在根目录package.json中增加workspaces配置替代Lerna的bootstrap功能：

{
  "name": "root",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "lerna": "^4.0.0"
  }
}

配置后根目录执行npm install即可完成本地包软链。

2. 校验components包的构建产物

你components包的package.json中main字段指向dist/index.js，但当前没有生成对应构建产物：

• 先在packages/components目录下执行npm run dev启动microbundle的监听构建，会自动生成dist目录和对应产物
• 建议修改components包package.json的files字段，后续发包时不会遗漏构建产物：

  "files": ["lib", "dist"]
  

3. 配置Next.js转译规则

你已经安装了next-transpile-modules但未生效，需要在packages/frontend目录下新建/修改next.config.js：

const withTM = require('next-transpile-modules')(['components']);

module.exports = withTM({
  reactStrictMode: true
});

该配置会告诉Next.js需要转译node_modules下的components包，否则Next.js默认不会处理node_modules内的React组件代码。

4. 验证软链生效

完成以上步骤后，检查packages/frontend/node_modules下是否存在components文件夹，且内容和本地packages/components目录完全一致。如果不存在，可以手动在packages/frontend目录执行npm link ../components临时链接。
所有配置完成后重启Next.js的dev服务即可正常引入components包。

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