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

Question

I've been having Vercel deployment issues when trying to convert my existing Nextjs app to be a monorepo using either npm or yarn workspaces. After changing to a monorepo, my builds are failing due to a package Not found issue.

You can see the full repository on GitHub in the monorepo-testing branch.

I essentially have two npm packages:

• proposals.es: This package is the actual Next.js app (located in the ./website folder)
• @common/components: This package contains simple React components (located in the ./common/components folder)

The folder structure for this currently looks like this:

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

To get the app to install correctly and run successfully locally, I run npm install --workspaces from the root level and then run npm run dev from within website to start the server.

---

I have done the following steps to try to get this new monorepo structure to work:

• I added workspaces to my root level package.json:
• I added next-transpile-modules to my Next config file
• I added @common/components to my website's package.json
• I imported my common component in a page and rendered it (this works fine when running the dev server)

---

I end up getting this error when trying to do an automatic deployment to Vercel after a git push:

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.

My Vercel settings are here:

All settings are default, except the root directory is set to website. I was thinking that the issue might be that it is not using npm install --workspaces to do the installation, however I have tried changing the install script in my Vercel project to npm install --workspaces as well as cd ../../ && npm install --workspaces but both would error out.

I feel like I'm probably doing something fundamentally wrong, so if anyone has any tips or suggestions on how to tackle this issue it would be greatly appreciated. Thanks!

Answer 1

The issue seems to be with using npm workspaces with Next.js... When I switched over to a minimal POC using yarn workspaces it seems to be working. Going to try to convert everything to using yarn now and see if it's all better afterwards, I'll update here once I do so.

---

Edit: Was able to successfully deploy the two apps now and I was able to import my common package from them.

Repo: https://github.com/saadq/proposals.es

Answer 2

In addition to @Saad's answer, we had to manually set the install step to yarn install. It appears it was using npm install by default, which was not working.

Also, make sure that you are using the next-transpile-modules library in your next.config.js file and specifying any shared package you want to use from your 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
  },
})

Answer 3

Based on our experience, this looks like an issue with Vercel not yet supporting Node v15+ (npm workspaces were introduced in npm v7).

Running our monorepo's Next.js project locally on Node v15 or v16 works as expected, but deploying to Vercel (currently only support Node v12.x and v14.x (docs) we start to see lockfile version warnings and "package not found" errors. Hopefully we'll see an upgrade here soon (discussion) and can continue to use npm.