next.js: Babel error causing builds to fail

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 20.3.0: Thu Jan 21 00:06:51 PST 2021; root:xnu-7195.81.3~1/RELEASE_ARM64_T8101
Binaries:
  Node: 14.16.1
  npm: 6.14.12
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.10
  react: 17.0.2
  react-dom: 17.0.2

warn - Latest canary version not detected, detected: “12.1.7-canary.10”, newest: “12.1.7-canary.9”. Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue. Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

next run build

Describe the Bug

My deployments are failing on vercel, and when I locally run npm run build I get the following error: Error: [BABEL] /Users/mathchamp/Documents/GitHub/skillify-web/pages/_document.tsx: You gave us a visitor for the node type TSInstantiationExpression but it's not a valid type

Upon research, I think something with the latest version of babel is causing these errors.

Expected Behavior

Builds should pass with npm run build

To Reproduce

Run npm run build on the latest version of next.js

Builds that were passing yesterday are now failing.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 12
Comments: 24 (2 by maintainers)

Commits related to this issue

fix(apps/next): 临时替换 @babel/types 回上一版本，以避免 Next.js 编译错误 see: https://github.com/vercel/next.js/issues/37080#issuecomment-1135237368 — committed to M4nk1n/expo-pnpm-monorepo by deleted user 2 years ago

Most upvoted comments

Encountered this as well. Friday morning Babel released version 7.18.0. That comes with a new typescript feature support (https://github.com/babel/babel/issues/14322, https://github.com/babel/babel/pull/14457) that comes with a new TS 4.7 feature (https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-rc/#instantiation-expressions). Newly created projects started using that version but Next’s built-in Babel does not support that new feature, hence the error

Solution in my case was to use the yarn resolutions to pin some babel deps to latest pre-7.18 versions. Can’t give you a list because it’s quite specific to my case but check yarn.lock for babel related packages that have a 7.18.0 version and downgrade them.

+10

mihaiblaga89 on May 23, 2022

I am releasing @babel/plugin-transform-typescript v7.18.4 that should fix this bug (it will be on npm as soon as https://github.com/babel/babel/actions/runs/2405657382 finishes, probably in 5 minutes from now).

The problem was that we were running some feature detection in the plugin to see which @babel/types features were available, but the version of @babel/types present in node_modules is different from the one that Next.js uses to run the plugin.

nicolo-ribaudo on May 29, 2022

For me the error was caused by @babel/preset-typescript (and apparently one or more of its dependencies like @babel/plugin-transform-typescript) in .babelrc. Removing them solved the issue. Not sure why.

VRSEN on May 22, 2022

I opened https://github.com/babel/babel/pull/14610 to fix this. Unfortunately the only workaround until that PR is merged&released is to pin @babel/plugin-transform-typescript to ~7.17.0.

nicolo-ribaudo on May 27, 2022

Thanks @vithushan19 for the example, i’m also experiencing this error 😦

I thought it was some conflict with other libs but i made a test deleting everything and installing babel from scratch on my nextjs project and the error still occurs…

I don’t know if this information is useful, but when i deleted the @babel/preset-typescript from the array of presets inside my .babelrc file, everything worked fine!

DeveloperMatheus on May 27, 2022

https://github.com/skillify-ca/skillify-web

vithushan19 on May 27, 2022

It work for me.

yarn add @babel/types
copy and paste this to last package.json file “resolutions”: { “@babel/core”: “7.17.12”, “@babel/types”: “7.17.12” }
remove node_modules and yarn.lock file
yarn again

mynameisthanhdat on May 25, 2022

"dependencies": {
  "next": "^12.1.6",
},
"devDependencies": {
  "@babel/core": "^7.15.0",
  "@babel/preset-env": "^7.15.0",
  "@babel/preset-react": "^7.15.0",
  "@babel/preset-typescript": "^7.15.0",
},
"overrides": {
  "@babel/core": "7.15.0",
  "@babel/types": "7.15.0"
}

still error here…

fixed, overrides all babel package version 7.15.0

SoonGwan on May 26, 2022