Nx工作区构建NextJS应用启动时报Cannot find module 'typescript'错误

问题根本原因 #

使用@nrwl/next构建的Next.js应用，默认的next.config.js会引入@nrwl/next/plugins/with-nx插件，该插件运行时依赖typescript模块。而typescript默认被定义为开发依赖（devDependency），当你将构建产物单独拷贝到新环境仅安装生产依赖时，开发依赖不会被安装，因此触发模块缺失报错。

解决方案 #

方案1：快速修复（兼容所有版本，操作成本最低）

直接将typescript添加到生产依赖中，在项目根目录执行以下命令：

# npm用户
npm install typescript --save
# yarn用户
yarn add typescript

重新执行构建后再打包部署即可，该方案仅会增加极小的部署包体积，对运行无任何影响。

方案2：开启独立输出模式（推荐，Next.js 12及以上版本适用）

你当前使用的Next.js 11.1可先升级到12.x兼容版本，之后修改应用的next.config.js配置：

// apps/sample-one/next.config.js
const { withNx } = require('@nrwl/next/plugins/with-nx');

module.exports = withNx({
  nx: {
    svgr: false,
  },
  // 新增独立输出配置，Next.js会自动打包所有运行所需依赖
  output: 'standalone'
});

重新构建后，完整可运行的产物会生成在dist/apps/sample-one/standalone目录，直接拷贝该目录部署即可，无需额外执行依赖安装命令，也不会出现依赖缺失问题。

方案3：全量依赖安装（不推荐）

如果暂时不想修改配置，拷贝构建产物时需同步将项目根目录的package.json文件拷贝到部署目录，执行npm install --production=false安装所有依赖（包括开发依赖）即可解决问题，该方案会引入大量无用的开发依赖，导致部署包体积显著增大。

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