Babel error causing builds to fail

vithushan19 commented 2 years ago

Verify canary release

[X] 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 commented 2 years ago

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 commented 2 years ago

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.

FernandoGOT commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

vithushan19 commented 2 years ago

yes I am.

FernandoGOT commented 2 years ago

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

mynameisthanhdat commented 2 years ago

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

AdrianSaezClemente commented 2 years ago

For npm, it worked for me:

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"
  }
}

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

nicolo-ribaudo commented 2 years ago

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

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

ElijahKaftanov commented 2 years ago

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

Please share your complete stack trace

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

"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 commented 2 years ago

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

nicolo-ribaudo commented 2 years ago

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 commented 2 years ago

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

DeveloperMatheus commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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[bot] commented 2 years ago

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.

vercel / next.js