8

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 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:

enter image description 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!

Saad
  • 49,729
  • 21
  • 73
  • 112
  • Hi! I'm having the same problem. But I'm using an experimental `externalDir` flag to compile modules instead of `next-transpile-modules`. – chimit Dec 02 '21 at 10:46
  • And you're running into the same issue when using `externalDir` instead? I haven't had a chance to revisit this issue though, I just ended up getting it resolved by using `yarn` workspaces instead of `npm` workspaces – Saad Dec 02 '21 at 17:22
  • Looks like it doesn't reach that moment when `externalDir` comes into play. Tried dozens of ways to customize install and build commands but without any success. I'm afraid I have to switch to Yarn as well. – chimit Dec 03 '21 at 06:44

3 Answers3

7

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

Saad
  • 49,729
  • 21
  • 73
  • 112
  • 1
    I also had to switch to Yarn to make it work. And I can confirm: with Yarn workspaces everything works with default deployment settings in Vercel (just choose the right directory of the project). Another important thing for me was choosing `nodeLinker: node-modules`. – chimit Dec 13 '21 at 14:31
  • Hmm interesting, I didn't have to set `nodeLinker` explicitly. I wonder if it's a case-by-case basis – Saad Dec 13 '21 at 19:57
  • Can confirm the Turborepo [Basic starter example](https://github.com/vercel/turborepo/tree/main/examples/basic) deploys to Vercel when using Yarn, but fails when using npm workspaces: `No Next.js version could be detected in your project.` – adamduncan Jan 26 '22 at 12:33
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.

enter image description here

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
  },
})
vdutz
  • 31
  • 3
0

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.

adamduncan
  • 148
  • 1
  • 6