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

Question

在尝试使用 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 然后从内部运行 npm run dev website 启动服务器。

我已经完成了以下步骤来尝试让这个新的 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 但是两者都会出错。

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

Answer 1

问题似乎与将 npm 工作区与 Next.js 结合使用有关...当我切换到使用 yarn 工作区的最小 POC 时，它似乎可以正常工作。现在将尝试将所有内容转换为使用 yarn，看看之后是否会更好，我会在此处更新。

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

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

Answer 2

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

运行我们的 monorepo 的 Next.js 项目在本地节点 v15 或 v16 上按预期工作，但部署到 Vercel（目前仅支持节点 v12.x 和 v14.x（docs) we start to see lockfile version warnings and "package not found" errors. Hopefully we'll see an upgrade here soon (discussion) 并且可以继续使用 npm.

Answer 3

除了@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
  },
})

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

Unable to deploy a Next.js monorepo using workspaces to Vercel

next.js

vercel