Deploying nextjs with Auth0 in yarn monorrepo

Hello! I’m experiencing some problems deploying a Next.js application. The main page loads properly but when trying to log in I receive an error. I have tried several things and the error changes but I can’t get past it.

The original error was:

Runtime.ImportModuleError - Error: Cannot find module '../../../../../../../node_modules/next/dist/server/next-server.js' Require stack: - /var/task/.netlify/functions-internal/___netlify-handler/___netlify-handler.js - /var/task/___netlify-handler.js - /var/runtime/index.mjs

Then I followed advice here and downgraded to "@netlify/plugin-nextjs": "4.36.1", and the error changed to

Runtime.ImportModuleError - Error: Cannot find module './node-environment' Require stack: - /var/task/src/apps/node_modules/next/dist/server/next-server.js - /var/task/src/apps/treasury/next-frontend/src/apps/treasury/next-frontend/.netlify/functions-internal/___netlify-handler/___netlify-handler.js - /var/task/___netlify-handler.js - /var/runtime/index.mjs

At some point making changes (which I can completely isolate) the error changed to

Runtime.ImportModuleError - Error: Cannot find module 'follow-redirects' Require stack: - /var/task/.netlify/functions-internal/___netlify-handler/handlerUtils.js - /var/task/.netlify/functions-internal/___netlify-handler/___netlify-handler.js - /var/task/___netlify-handler.js - /var/runtime/index.mjs

I don’t think it is related to the monorrepo because I reproduced it outside of it.

In case it helps here is my package.json and netlify.toml

{
  "dependencies": {
    "@auth0/nextjs-auth0": "^3.1.0",
    "@context/shared": "^0.0.1",
    "@context/treasury": "^0.0.1",
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@netlify/next": "^1.4.9",
    "@netlify/plugin-nextjs": "4.36.1",
    "date-fns": "^2.30.0",
    "follow-redirects": "^1.15.2",
    "formidable": "^3.5.1",
    "next": "^13",
    "prop-types": "^15.8.1",
    "react": "^18",
    "react-datepicker": "^4.16.0",
    "react-dom": "^18",
    "react-icons": "^4.2.0",
    "react-pdf": "^7.3.3",
    "react-toastify": "^9.1.3",
    "tailwindcss": "^3.2.1",
    "zod": "^3.22.2"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.4.19",
    "@swc/core": "^1.3.84",
    "@swc/jest": "^0.2.29",
    "@testing-library/cypress": "^10.0.0",
    "@testing-library/jest-dom": "^6.1.3",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/formidable": "^3.4.2",
    "@types/jest": "^29.5.4",
    "@types/jest-axe": "^3.5.5",
    "@types/node": "^20.6.0",
    "@types/prop-types": "^15.7.5",
    "@types/react": "^18",
    "@types/react-datepicker": "^4.15.0",
    "@types/react-dom": "^18",
    "@types/react-pdf": "^7.0.0",
    "@typescript-eslint/eslint-plugin": "^6.7.0",
    "@typescript-eslint/parser": "^6.7.0",
    "autoprefixer": "^10.3.4",
    "cypress": "^13.2.0",
    "eslint": "^8.49.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-next": "13.4.19",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-module-resolver": "^1.5.0",
    "file-loader": "^6.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.7.0",
    "jest-axe": "^8.0.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-transform-stub": "^2.0.0",
    "postcss": "^8.3.6",
    "typescript": "5.2.2",
    "typescript-eslint": "^0.0.1-alpha.0"
  },
  "resolutions": {
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7"
  }
}
[build]
  command = "yarn build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

# This is a fake plugin, that makes it run npm install
[[plugins]]
package = "@netlify/plugin-local-install-core"

Thanks in advance

I’ve seen the follow-redirects issue happen when users are using pnpm and they simply need to specify the --shamefully-hoist flag.

Since you can replicate the issues outside your setupm mind sharing a minimal reproduction?

Hey, I saw that problem with pnpm but I’m not using it, that’s why I specifically commented about using yarn.

I’m trying to provide a minimal reproduction. While being at it now I’m getting errors on build about not having @opentelemetry/api and react-server-dom-webpack is that supposed to happen?

I don’t think so. Does your minimal reproduction need those libraries in the first place?

No, they don’t weird enough if I add them manually the site works outside of the monorepo.

I have a minimal repro in a monorepo but now I’m stuck with a different problem in deploy.

next-yarn.netlify.app

Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
 @netlify/build 29.20.13

❯ Flags
 packagePath: src/apps/treasury/next-frontend

❯ Current directory
 /Users/carlosespa/projects/netlify-yarn-next

❯ Config file
 No config file was defined: using default values.

❯ Context
 dev

❯ Using Next.js Runtime - v4.39.4

@netlify/plugin-nextjs (onPreBuild event)                     
────────────────────────────────────────────────────────────────

No Next.js cache to restore.
Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.

(@netlify/plugin-nextjs onPreBuild completed in 1.8s)

Build command from Netlify app                                
────────────────────────────────────────────────────────────────

$ yarn build
yarn run v1.22.19
$ lerna run build
lerna notice cli v4.0.0
lerna info versioning independent
lerna info Executing command in 1 package: "yarn run build"
lerna info run Ran npm script 'build' in '@app/treasury-front' in 4.8s:
$ next build
- info Loaded env from /Users/carlosespa/projects/netlify-yarn-next/src/apps/treasury/next-frontend/.env.local
- info Linting and checking validity of types...
- info Creating an optimized production build...
- info Compiled successfully
- info Collecting page data...
- info Generating static pages (0/3)
- info Generating static pages (3/3)
- info Finalizing page optimization...

Route (pages)                              Size     First Load JS
┌ ○ /                                      372 B          81.2 kB
├   /_app                                  0 B            80.8 kB
├ ○ /404                                   182 B            81 kB
└ λ /api/auth/[...auth0]                   0 B            80.8 kB
+ First Load JS shared by all              80.8 kB
 ├ chunks/framework-c4ebaa44d1a3dafa.js   45.2 kB
 ├ chunks/main-4681c2e42fc7a00c.js        29.4 kB
 ├ chunks/pages/_app-208da0430c9dc9e8.js  5.46 kB
 └ chunks/webpack-9339c7e225139a0a.js     776 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

lerna success run Ran npm script 'build' in 1 package in 4.8s:
lerna success - @app/treasury-front
✨  Done in 5.41s.

(build.command completed in 5.5s)

@netlify/plugin-nextjs (onBuild event)                        
────────────────────────────────────────────────────────────────

Moving static page files to serve from CDN...
Moved 3 files
You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.
Netlify configuration property "redirects" value changed to [
 { from: '/_next/static/*', to: '/static/:splat', status: 200 },
 {
   from: '/_next/image*',
   query: { url: ':url', w: ':width', q: ':quality' },
   to: '/_ipx/w_:width,q_:quality/:url',
   status: 301
 },
 { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
 {
   from: '/api/*',
   to: '/.netlify/functions/___netlify-handler',
   status: 200
 },
 {
   from: '/*',
   to: '/.netlify/functions/___netlify-handler',
   status: 200,
   conditions: { Cookie: [Array] },
   force: true
 },
 {
   from: '/_next/data/EohqnJnt6AA7K-A9AvE2v/index.json',
   to: '/.netlify/functions/___netlify-handler',
   status: 200,
   force: false
 },
 {
   from: '/',
   to: '/.netlify/functions/___netlify-handler',
   status: 200,
   force: false
 },
 {
   from: '/*',
   to: '/.netlify/functions/___netlify-handler',
   status: 200
 }
].

(@netlify/plugin-nextjs onBuild completed in 1.5s)

Functions bundling                                            
────────────────────────────────────────────────────────────────

The Netlify Functions setting targets a non-existing directory: src/apps/treasury/next-frontend/netlify/functions

Packaging Functions from src/apps/treasury/next-frontend/.netlify/functions-internal directory:
- ___netlify-handler/___netlify-handler.js
- ___netlify-odb-handler/___netlify-odb-handler.js
- _ipx/_ipx.js


(Functions bundling completed in 8.3s)

Edge Functions bundling                                       
────────────────────────────────────────────────────────────────


(Edge Functions bundling completed in 309ms)

@netlify/plugin-nextjs (onPostBuild event)                    
────────────────────────────────────────────────────────────────

Next.js cache saved.
🧪 Thank you for testing "appDir" support on Netlify. For known issues and to give feedback, visit https://ntl.fyi/next-13-feedback

(@netlify/plugin-nextjs onPostBuild completed in 30ms)

Netlify Build Complete                                        
────────────────────────────────────────────────────────────────

(Netlify Build completed in 18.6s)

Deploy path:    /Users/carlosespa/projects/netlify-yarn-next/src/apps/treasury/next-frontend/.next
Functions path: /Users/carlosespa/projects/netlify-yarn-next/src/apps/treasury/next-frontend/netlify/functions
Functions folder "/Users/carlosespa/projects/netlify-yarn-next/src/apps/treasury/next-frontend/netlify/functions" specified but it doesn't exist! Will proceed without deploying functions
›   TypeError: The "path" argument must be of type string or an instance of Buffer or URL. Received undefined

I don’t think you’re using Netlify Functions explicitly, are you? If not, you probably don’t need to se a functions folder.

It was set by default by the UI, I removed it and same result. It no longer warns about the empty function folder but the path error remains

When I go here: next-yarn.netlify.app and try to login, I get an error page:

That was a mismatch with Auth0 and it is now solved and working. However I’m still unable to deploy manually