I am having an issue with babel building angular app for production

Question

Current Behavior I am building my angular project on circleci and it just keeps failing with the following message:

An unhandled exception occurred: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'

Require stack:

/home/circleci/eleven-app/frontend/node_modules/@angular-devkit/build-angular/node_modules/@babel/preset-env/lib/polyfills/corejs3/usage-plugin.js
/home/circleci/eleven-app/frontend/node_modules/@angular-devkit/build-angular/node_modules/@babel/preset-env/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/@angular-devkit/build-angular/node_modules/@babel/core/lib/config/files/plugins.js
/home/circleci/eleven-app/frontend/node_modules/@angular-devkit/build-angular/node_modules/@babel/core/lib/config/files/index.js
/home/circleci/eleven-app/frontend/node_modules/@angular-devkit/build-angular/node_modules/@babel/core/lib/index.js
/home/circleci/eleven-app/frontend/node_modules/@angular-devkit/build-angular/src/utils/process-bundle.js
/home/circleci/eleven-app/frontend/node_modules/jest-worker/build/workers/processChild.js

I am using

{
  "@babel/plugin-proposal-numeric-separator": "^7.8.3",
  "core-js": "3.2.1",
  "tslib": "^1.11.1",
  "@babel/compat-data": "~7.8.0",
  "@babel/runtime-corejs3": "^7.9.2",
  "ts-node": "7.0.0",
  "tslint": "5.11.0",
  "typescript": "3.5.3",
}
resolutions: {
  "@babel/preset-env": "^7.8.7"
}

here is npx nls why @babel/preset-env output:

eleven-app-frontend > @angular-devkit/build-angular > @babel/[email protected]
eleven-app-frontend > @nrwl/angular > @nrwl/cypress > @cypress/webpack-preprocessor > @babel/[email protected]
eleven-app-frontend > @nrwl/cypress > @cypress/webpack-preprocessor > @babel/[email protected]

Thank you for reading.

Answer 1

Had the same issue today, so I'm assuming there's something weird with the latest version.

My package.json had the following:

"@babel/compat-data": "~7.9.0"

I removed the ~ to force 7.9.0 instead of allowing newer ones and it did the trick for me.

There's probably a newer version that works but since you opened an issue for them (https://github.com/babel/babel/issues/11427) I'll just wait for more details.

Answer 2

I've the same issue when using TravisCI & Vue with Jest and Babel. My test suit has been failing. Adding "@babel/compat-data": "7.9.0" to devDependencies in my package.json file solved my problems.

Answer 3

These 3 options we came up with so far:

• Adapt dependency of babel/preset-env to v7.9.0: "@babel/preset-env": "=7.9.0"
• In case you use a NodeJS Docker Image, fix the version to something below 13.13, i.e.: node:13.12.0-alpine
• Adding or upgrading "@babel/compat-data": "7.9.0" to devDependencies

The solutions are temporarily and should be removed as soon as there is an actual fix of the node images or the babel/preset-env library.

Linked Github issues:

babel - https://github.com/babel/babel/issues/11427

nodejs - https://github.com/nodejs/node/issues/32852#issuecomment-613652057

Answer 4

I had the same issue today in Github Actions build for a Vue FE project. It builds fine locally. I'm going to try the solution above and I'll report back...

Update: After looking through the package-lock file, my solution was to explicitly add "@babel/compat-data" to the prod dependencies. Previously it was only a dependency for some dev dependencies. So my package.json now looks like:

"dependencies": {
  "@babel/compat-data": "^7.8.6",
  ...

Answer 5

Same issue. Solved it by following above advices + removing node_modules (see this github thread):

• Added explicitly @babel/compat-data": "7.9.0" to devDependencies
• Upgraded node (13.3 to 14.0 in my case)
• Had to remove my node_modules folder and re run yarn (or npm)

Answer 6

If you're using yarn, try to remove the yarn.lock file in your project. And then reinstall by run yarn install; you'll get a new yarn.lock file, which is fine.

It worked for me in my Next.js project.