无法使用工作区将 Next.js monorepo 部署到 Vercel答案

【问题标题】：Unable to deploy a Next.js monorepo using workspaces to Vercel无法使用工作区将 Next.js monorepo 部署到 Vercel
【发布时间】：2022-04-23 02:28:13
【问题描述】：

在尝试使用 npm 或 yarn 工作区将我现有的 Nextjs 应用程序转换为 monorepo 时，我遇到了 Vercel 部署问题。更改为 monorepo 后，由于包 Not found 问题，我的构建失败。

你可以看到完整的仓库on GitHub in the monorepo-testing branch。

我基本上有两个 npm 包：

proposals.es：这个包是实际的 Next.js 应用程序（位于 ./website 文件夹中）
@common/components：这个包包含简单的 React 组件（位于 ./common/components 文件夹中）

目前的文件夹结构如下所示：

.
├── next-env.d.ts
├── package-lock.json
├── package.json
├── common
│   └── components 
│       ├── index.ts
│       └── package.json 
└── website 
    ├── next.config.js
    ├── package.json
    ├── src
    └── tsconfig.json

为了让应用程序正确安装并在本地成功运行，我从根级别运行npm install --workspaces，然后从website 内运行npm run dev 以启动服务器。

我已经完成了以下步骤来尝试让这个新的 monorepo 结构发挥作用：

我已将workspaces 添加到my root level package.json：
我将next-transpile-modules 添加到我的Next config file
我将@common/components 添加到my website's package.json
我 imported my common component in a page 并渲染它（在运行开发服务器时可以正常工作）

在git push 之后尝试自动部署到 Vercel 时，我最终收到此错误：

Installing dependencies...
Detected `package-lock.json` generated by npm 7...
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@common%2fcomponents - Not found
npm ERR! 404 
npm ERR! 404  '@common/components@*' is not in this registry.

我的 Vercel 设置在这里：

所有设置都是默认的，除了根目录设置为website。我在想问题可能是它没有使用npm install --workspaces 进行安装，但是我尝试将我的Vercel 项目中的安装脚本更改为npm install --workspaces 和cd ../../ && npm install --workspaces，但两者都会出错。

我觉得我可能做错了什么，所以如果有人对如何解决这个问题有任何提示或建议，我将不胜感激。谢谢！

【问题讨论】：

嗨！我有同样的问题。但我使用的是实验性的externalDir 标志来编译模块而不是next-transpile-modules。
您在使用externalDir 时遇到了同样的问题？不过，我还没有机会重新讨论这个问题，我最终通过使用 yarn workspaces 而不是 npm workspaces 解决了这个问题
看起来它还没有达到externalDir 发挥作用的那一刻。尝试了数十种方法来自定义安装和构建命令，但没有任何成功。恐怕我也必须改用 Yarn。

标签： next.js vercel

【解决方案1】：

问题似乎在于将 npm 工作区与 Next.js 一起使用...当我使用 yarn 工作区切换到最小 POC 时，它似乎正在工作。现在将尝试将所有内容转换为使用yarn，看看之后是否会更好，一旦这样做，我会在这里更新。

编辑：现在能够成功部署这两个应用程序，并且我能够从它们导入我的通用包。

回购：https://github.com/saadq/proposals.es

【讨论】：

我还必须切换到 Yarn 才能使其工作。我可以确认：使用 Yarn 工作区，一切都适用于 Vercel 中的默认部署设置（只需选择项目的正确目录）。对我来说另一个重要的事情是选择nodeLinker: node-modules。
嗯，很有趣，我不必明确设置nodeLinker。不知道是不是个案
可以确认 Turborepo Basic starter example 在使用 Yarn 时部署到 Vercel，但在使用 npm 工作空间时失败：No Next.js version could be detected in your project.

【解决方案2】：

除了@Saad 的回答，我们不得不手动将安装步骤设置为yarn install。它似乎默认使用npm install，但不起作用。

另外，请确保您在 next.config.js 文件中使用了 next-transpile-modules 库，并指定您想从 monorepo 中使用的任何共享包：

const withTM = require('next-transpile-modules')(['@your/shared-package']); // pass the modules you would like to see transpiled

const nextConfig = withTM({
  experimental: {
    externalDir: true, // This allows importing TS/TSX from outside of the current Next.js project root directory. See: https://github.com/vercel/next.js/pull/22867
  },
})

【讨论】：

【解决方案3】：

根据我们的经验，这似乎是 Vercel 尚不支持 Node v15+ 的问题（npm v7 中引入了 npm 工作区）。

在 Node v15 或 v16 上本地运行我们的 monorepo 的 Next.js 项目按预期工作，但部署到 Vercel（目前仅支持 Node v12.x 和 v14.x (docs) 我们开始看到锁定文件版本警告和“ package not found" 错误。希望我们能很快看到这里的升级 (discussion) 并且可以继续使用npm。

【讨论】：