Adding an _app.js file in v10.0.4 causes @babel/runtime error

[cassidoo]

Bug report

Describe the bug

I have a basic Next.js v10.0.4 application, and when I add an _app.js file, I get this error:

Module not found: Can't resolve '@babel/runtime/helpers/esm/defineProperty'

When I downgrade to v10.0.3, the error goes away.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Run a Next.js project, version 10.0.4

// package.json
  "dependencies": {
    "next": "10.0.4",
    "react": "17.0.1",
    "react-dom": "17.0.1",
  }

2. Add an _app.js file:

function Application({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default Application

3. See error:

error - ./pages/_app.js
Module not found: Can't resolve '@babel/runtime/helpers/esm/defineProperty' in '/.../pages'
Error: Cannot find module '/.../.next/build-manifest.json'
Require stack:
- /.../node_modules/next/dist/next-server/server/load-components.js
- /.../node_modules/next/dist/next-server/server/api-utils.js
- /.../node_modules/next/dist/next-server/server/next-server.js
- /.../node_modules/next/dist/server/next.js
- /.../node_modules/next/dist/server/lib/start-server.js
- /.../node_modules/next/dist/cli/next-dev.js
- /.../node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1042:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at loadComponents (/.../node_modules/next/dist/next-server/server/load-components.js:1:1035)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async DevServer.findPageComponents (/.../node_modules/next/dist/next-server/server/next-server.js:74:257)
    at async DevServer.renderErrorToHTML (/.../node_modules/next/dist/next-server/server/next-server.js:126:109)
    at async DevServer.render (/.../node_modules/next/dist/next-server/server/next-server.js:72:236)
    at async Object.fn (/.../node_modules/next/dist/next-server/server/next-server.js:56:618)
    at async Router.execute (/.../node_modules/next/dist/next-server/server/router.js:23:67)
    at async DevServer.run (/.../node_modules/next/dist/next-server/server/next-server.js:66:1042)
    at async DevServer.handleRequest (/.../node_modules/next/dist/next-server/server/next-server.js:34:1081) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/.../node_modules/next/dist/next-server/server/load-components.js',
    '/.../node_modules/next/dist/next-server/server/api-utils.js',
    '/.../node_modules/next/dist/next-server/server/next-server.js',
    '/.../node_modules/next/dist/server/next.js',
    '/.../node_modules/next/dist/server/lib/start-server.js',
    '/.../node_modules/next/dist/cli/next-dev.js',
    '/.../node_modules/next/dist/bin/next'
  ]
}
error - ./pages/_app.js
Module not found: Can't resolve '@babel/runtime/helpers/esm/defineProperty' in '/.../pages'

Expected behavior

I expect the application to run without any user-facing changes.

System information

• OS: macOS
• Browser (if applies) Chrome
• Version of Next.js: v10.0.4
• Version of Node.js: v12.16.2
• Deployment: local

Additional context

Specifically I was trying to update this repo and a couple others, but I haven't pushed any yet because of this, and all of them have had this issue. I deleted node_modules before updating the Next.js version.

I tried doing the following to see if that would change anything, but no dice:

npm i @babel/runtime@7.12.1
npm i @babel/runtime@latest
npm r @babel/runtime

Update: I downgraded to Next.js v10.0.3, and then back to v10.0.4, and now it is working just fine again!

[nobu222]

i have same problems..

Error message:

Module not found: Can't resolve '/Users/n-futagami/Project/hayaben/hayaben-next/node_modules/next/node_modules/@babel/runtime/helpers/esm/extends'

@babel packages not found in node_modules/next/node_modules.
but, node_modules/@babel/... is exists.

What is the solution?

[tremby]

Meanwhile, my error was this:

ModuleNotFoundError: Module not found: Error: Can't resolve '<...>/node_modules/next/node_modules/@babel/runtime/helpers/construct'

I have also seen

ModuleNotFoundError: Module not found: Error: Can't resolve '<...>/node_modules/next/node_modules/@babel/runtime/helpers/esm/defineProperty'

In both of these cases, the nonsensical downgrade/upgrade of @babel/runtime Cassidy mentioned above is what works for me; that was my suggestion to her on the Next Discord channel earlier today. @nobu222, you should give that a try and see if it clears your issue up.

I have no idea why it works; I end up with the same version of @babel/runtime I started with, yet I can reproducibly cause this error (by deleting package_lock.json then running npm i) and fix it again via those commands, at least within my project. I haven't been able to make a minimal breaking case.

In particular, with a bit more detail, and an extra step just for clarity:

• npm i @babel/runtime (it installs 7.12.5 which was already installed as a nested dependency), build still fails
• npm i @babel/runtime@7.12.1 (which is the previous version), build now succeeds
• npm i @babel/runtime@latest (which is 7.12.5), build still succeeds
• npm r @babel/runtime (it's removed from package.json but still installed as it's a nested dependency), build still succeeds

Maybe it won't work for you though -- it didn't work for Cassidy.

[nobu222]

@tremby Thanks for the feedback!
It's working as expected.

i tried your steps. ( i'm using yarn, not npm)

Successed only step2 (using @babel/runtime@7.12.1).
i decided to use old version(7.12.1) in my project.

[Timer]

I'm not able to reproduce this, however, I have a feeling it's a bug with npm that's causing this.

Can you try to delete both package-lock.json and node_modules and running an install again?

[cassidoo]

I'm not able to reproduce this, however, I have a feeling it's a bug with npm that's causing this.

Can you try to delete both package-lock.json and node_modules and running an install again?

@Timer my update line was tiny so you might have missed it, but I fixed it this way:

Update: I downgraded to Next.js v10.0.3, and then back to v10.0.4, and now it is working just fine again!

It's a weird one. I did try the package-lock.json and node_modules thing first, and it didn't work.

[Timer]

Oh interesting, yeah I must've misread that! Our hands are a bit tied when it comes to npm bugs.

However, this PR may prevent this specific instance: #19538
There's no guarantee a second error wouldn't of popped up. 😞

If you have the original package-lock.json, it might be worth sending it to the npm support team and ask them to analyze it to fix the bug on upgrade.

[lbssousa]

I'm having this same exact problem with any Next version since 10.0.5. The only workaround I've found is downgrading Next to version 10.0.4.

[rommyarb]

I also have the same problem. My workaround is to delete yarn.lock file, delete node_modules directory, and reinstall all dependency (yarn / yarn install). Boom, errors are gone.

[demfabris]

Same issue, only solution was to downgrade Next to 10.0.4

[christian-fuss]

I had the same problem after cleaning up some unused dependencies. I tried upgrading everything, cleaning the yarn.lock but nothing worked. After enabling webpack5, the error is gone.

See https://nextjs.org/docs/messages/webpack5 for more info.

[dickwyn]

Has a similar issue happen on my jenkins build job, it built fine for me locally. (next@10.1.3)

ModuleNotFoundError: Module not found: Error: Can't resolve '<BUILD-DIRECTORY>/node_modules/next/node_modules/@babel/runtime/helpers/construct' in '<BUILD-DIRECTORY>/node_modules/next/dist/client'

enabling webpack5 on my next.config.js solved it for me. hats off to @christian-fuss

future: {
  webpack5: true,
},

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.