Babel error causing builds to fail

[vithushan19]

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.

[VRSEN]

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.

[mihaiblaga89]

Encountered this as well. Friday morning Babel released version 7.18.0. That comes with a new typescript feature support (babel/babel#14322, babel/babel#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.

[FernandoGOT]

Updated my babel packages to 7.17.12 and added this to my package.json

"overrides": {
  "@babel/types@7.18.0": "7.17.12"
}

I saw that @babel/core released a 7.18.1 to fix this, but they didn't update the npm package

[GiovaniBiagi]

none of these resolutions worked for me 😢 My package.json:

"dependencies": {
    "@popmotion/popcorn": "^0.4.4",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.24.0",
    "@styled-icons/material-outlined": "^10.18.0",
    "@styled-icons/remix-fill": "^10.18.0",
    "@testing-library/react-hooks": "^7.0.2",
    "antd": "^4.16.11",
    "axios": "^0.21.1",
    "framer-motion": "^6.3.3",
    "joi": "^17.4.2",
    "next": "^12.1.6",
    "next-auth": "^3.29.0",
    "next-pwa": "^5.2.21",
    "nookies": "^2.5.2",
    "polished": "^4.1.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-dropzone": "^11.4.0",
    "react-google-charts": "2",
    "react-google-recaptcha": "^2.1.0",
    "react-loading-skeleton": "^2.2.0",
    "react-slick": "^0.28.1",
    "react-toastify": "^8.0.3",
    "recharts": "^2.1.5",
    "stripe": "^8.209.0",
    "styled-components": "^5.3.5",
    "styled-icons": "^10.22.0",
    "styled-media-query": "^2.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-typescript": "^7.12.1",
    "@storybook/addon-essentials": "6.4.9",
    "@storybook/react": "6.4.9",
    "@testing-library/cypress": "^8.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^13.1.9",
    "@types/jest": "^26.0.15",
    "@types/next-auth": "^3.15.0",
    "@types/node": "^17.0.23",
    "@types/react": "^18.0.9",
    "@types/react-google-recaptcha": "^2.1.3",
    "@types/react-slick": "^0.23.4",
    "@types/recharts": "^1.8.21",
    "@types/styled-components": "^5.1.25",
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-styled-components": "^1.11.1",
    "chromatic": "^5.2.0",
    "codecov": "^3.8.2",
    "cypress": "^7.3.0",
    "cypress-file-upload": "^5.0.8",
    "cz-conventional-changelog": "3.3.0",
    "dotenv": "^9.0.2",
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "git-commit-msg-linter": "^3.0.0",
    "husky": "^6.0.0",
    "jest": "^26.6.0",
    "jest-styled-components": "^7.0.3",
    "lint-staged": "^11.0.0",
    "plop": "^2.7.4",
    "prettier": "^2.1.2",
    "typescript": "^4.0.3"
  },

somebody can help?

[FernandoGOT]

@GiovaniBiagi check your package-lock.json or yarn.lock file for peer dependences, doa find for babel or 7.18.0 and see if someone is using it, then do a override on your package,json for the peerdependences that you find

[vithushan19]

I tried adding overrides to my package.json but that didn't help. Am I using overrides correctly?

{
  "name": "with-tailwindcss",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "lint": "next lint",
    "start": "next start",
    "test": "jest",
    "storybook": "start-storybook -s ./public -p 6006",
    "build-storybook": "build-storybook -s public",
    "chromatic": "npx chromatic --project-token=3849dc6eb670"
  },
  "overrides": {
    "@babel/core@7.18.0": "7.17.12",
    "@babel/types@7.18.0": "7.17.12",
    "@babel/generator@7.18.0": "7.17.12",
    "@babel/helper-create-class-features-plugin@7.18.0": "7.17.12",
    "@babel/helper-module-transforms@7.18.0": "7.17.12",
    "@babel/traverse@7.18.0": "7.17.12",
    "@babel/plugin-proposal-class-static-block@7.18.0": "7.17.12",
    "@babel/helpers@7.18.0": "7.17.12",
    "@babel/parser@7.18.0": "7.17.12",
    "@babel/plugin-proposal-object-rest-spread@7.18.0": "7.17.12",
    "@babel/plugin-transform-destructuring@7.18.0": "7.17.12",
    "@babel/plugin-transform-for-of@7.18.0": "7.17.12",
    "@babel/plugin-transform-modules-amd@7.18.0": "7.17.12",
    "@babel/plugin-transform-modules-commonjs@7.18.0": "7.17.12",
    "@babel/plugin-transform-modules-systemjs@7.18.0": "7.17.12",
    "@babel/plugin-transform-modules-umd@7.18.0": "7.17.12",
    "@babel/plugin-transform-react-pure-annotations@7.18.0": "7.17.12",
    "@babel/plugin-transform-regenerator@7.18.0": "7.17.12",
    "@babel/plugin-transform-typescript@7.18.0": "7.17.12",
    "@babel/preset-env@7.18.0": "7.17.12",
    "@babel/runtime@7.18.0": "7.17.12",
    "@babel/runtime-corejs3@7.18.0": "7.17.12"
  },
  "dependencies": {
    "@apollo/client": "3.3.13",
    "@apollo/react-components": "4.0.0",
    "@apollo/react-hoc": "4.0.0",
    "@babel/preset-env": "7.14.2",
    "@babel/preset-typescript": "7.13.0",
    "@contentful/rich-text-html-renderer": "15.10.1",
    "@contentful/rich-text-react-renderer": "15.10.1",
    "@headlessui/react": "1.0.0",
    "@heroicons/react": "1.0.1",
    "@magic-ext/oauth": "2.1.1",
    "@matejmazur/react-katex": "3.1.3",
    "@react-three/drei": "7.27.5",
    "@react-three/fiber": "7.0.25",
    "@reduxjs/toolkit": "1.5.1",
    "@sendgrid/mail": "7.6.0",
    "@types/react-redux": "7.1.16",
    "autoprefixer": "10.0.4",
    "babel-jest": "26.6.3",
    "colyseus.js": "0.14.12",
    "contentful": "9.1.5",
    "dangerously-set-html-content": "1.0.8",
    "date-fns": "2.28.0",
    "fetch-retry": "4.1.1",
    "firebase": "9.1.2",
    "graphql": "15.5.0",
    "immutability-helper": "3.1.1",
    "kaboom": "2000.1.0",
    "katex": "0.13.16",
    "konva": "8.1.3",
    "lodash": "4.17.21",
    "lottie-react": "2.2.1",
    "magic-sdk": "8.1.1",
    "moment": "2.29.1",
    "next": "12.1.4",
    "postcss": "8.1.10",
    "react": "17.0.1",
    "react-beautiful-dnd": "13.0.0",
    "react-card-flip": "1.1.1",
    "react-confetti": "6.0.1",
    "react-dnd": "11.1.3",
    "react-dnd-html5-backend": "11.1.3",
    "react-dnd-touch-backend": "11.1.3",
    "react-dom": "17.0.1",
    "react-helmet": "6.1.0",
    "react-konva": "17.0.2-5",
    "react-modal": "3.12.1",
    "react-pageflip": "2.0.3",
    "react-redux": "7.2.4",
    "react-simple-hook-modal": "1.1.0",
    "react-slick": "0.28.1",
    "react-spring": "9.2.3",
    "react-three-fiber": "6.0.13",
    "react-transition-group": "4.4.2",
    "react-youtube": "7.13.1",
    "slick-carousel": "1.8.1",
    "tailwindcss": "2.0.2",
    "tailwindcss-hero-patterns": "0.0.1",
    "three": "0.130.1",
    "uuid": "8.3.2"
  },
  "devDependencies": {
    "@babel/core": "7.14.3",
    "@storybook/addon-actions": "6.2.8",
    "@storybook/addon-essentials": "6.2.8",
    "@storybook/addon-links": "6.2.8",
    "@storybook/react": "6.2.8",
    "@testing-library/jest-dom": "5.12.0",
    "@testing-library/react": "11.2.7",
    "@types/jest": "26.0.23",
    "@types/lodash": "4.14.168",
    "@types/node": "14.14.28",
    "@types/react": "17.0.2",
    "@typescript-eslint/eslint-plugin": "5.0.0",
    "@typescript-eslint/parser": "5.0.0",
    "babel-loader": "8.2.2",
    "chromatic": "6.5.1",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-react": "7.26.1",
    "jest": "26.6.3",
    "typescript": "4.1.5"
  },
  "alias": {
    "kaboom": "./node_modules/kaboom/dist/kaboom.mjs"
  }
}

[FernandoGOT]

are you deleting your node_modules folder and package-lock.json file before installing?

[vithushan19]

yes I am.

[FernandoGOT]

Please put a print fo you error and your package-lock.json or yarn.lock file's content

[mynameisthanhdat]

It work for me.

1. yarn add @babel/types
2. copy and paste this to last package.json file
   "resolutions": {
   "@babel/core": "7.17.12",
   "@babel/types": "7.17.12"
   }
3. remove node_modules and yarn.lock file
4. yarn again

[AdrianSaezClemente]

For npm, it worked for me:

1. Package.json

{
  "scripts": {
    "dev": "next dev",
    "start": "next start"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "7.14.5",
    ...
  },
  "devDependencies": {
    "@babel/core": "7.15.0",
    "@babel/types": "7.15.0",
    "@babel/preset-env": "7.15.0",
    "@babel/preset-typescript": "7.15.0",
    ...
  },
  "overrides": {
    "@babel/core": "7.15.0",
    "@babel/types": "7.15.0"
  }
}

2. Remove node_modules and package-lock.json file.
3. npm install

[nicolo-ribaudo]

This should be fixed in @babel/plugin-transform-typescript 7.18.1. If you still see the error with that version:

1. Please share your complete stack trace
2. As a workaround, delete @babel/types from your lockfile and update it.

[ElijahKaftanov]

This should be fixed in @babel/plugin-transform-typescript 7.18.1. If you still see the error with that version:

1. Please share your complete stack trace
2. As a workaround, delete @babel/types from your lockfile and update it.

Still having this issue with
"@babel/core": "^7.18.2", "@babel/plugin-proposal-class-properties": "^7.17.12", "@babel/plugin-proposal-decorators": "^7.18.2", "@babel/plugin-transform-typescript": "^7.18.1", "@babel/preset-env": "^7.18.2",

deleting @babel/types from yarn.lock didn't help

Error message:

./pages/[...all].tsx
Error: [BABEL] path_to_project/pages/[...all].tsx: You gave us a visitor for the node type TSInstantiationExpression but it's not a valid type
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadPluginDescriptor.next (<anonymous>)

[nicolo-ribaudo]

@ElijahKaftanov Could you share a repository that shows the bug? It's quite hard to understand where this comes from; those versions look correct.

[nebrius]

FWIW I'm getting the same issue as @ElijahKaftanov with those versions of dependencies and deleting @babel/types from package-lock.json. We're on version 10 of Next.js though still due to struggles with upgrading to React 17. Unfortunately I don't have a repro repo to share with you though at this point in time, but my stack trace is identical.

[SoonGwan]

"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

[malmo-east]

still error
I have updated all babel dependencies to latest versions ( 7.18.2 ) and next to 12.1.6

[nicolo-ribaudo]

Can someone of you which still sees the error after the updates share your lockfile? It might contain some hints to find the problem.

Or even better, share a repository that shows the bug.

[vithushan19]

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

[DeveloperMatheus]

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!

[nicolo-ribaudo]

I opened babel/babel#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]

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.

[balazsorban44]

This issue has been automatically closed because it received no activity for a month and had no reproduction to investigate. If you think it was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.