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

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/preset-env#7.8.7
eleven-app-frontend > #nrwl/angular > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
eleven-app-frontend > #nrwl/cypress > #cypress/webpack-preprocessor > #babel/preset-env#7.9.5
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.