Nuxt.js Cannot find module '#babel/preset-env/lib/utils' - vue.js

Question

I'm getting this error when trying to run yarn run dev --port=4000
Here is the error:
Module build failed (from ./node_modules/babel-loader/lib/index.js): friendly-errors 16:52:26
Error: /Users/jacob/code/artistrepublik/elite-reviews/.nuxt/client.js: Cannot find module '#babel/preset-env/lib/utils'
Require stack:
- /Users/jacob/code/artistrepublik/elite-reviews/node_modules/#nuxt/babel-preset-app/src/polyfills-plugin.js
- /Users/jacob/code/artistrepublik/elite-reviews/node_modules/#nuxt/babel-preset-app/src/index.js
- /Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/core/lib/config/files/module-types.js
- /Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/core/lib/config/files/configuration.js
- /Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/core/lib/config/files/index.js
- /Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/core/lib/index.js
- /Users/jacob/code/artistrepublik/elite-reviews/node_modules/nuxt-route-meta/dist/index.js
- /Users/jacob/code/artistrepublik/elite-reviews/node_modules/#nuxt/core/dist/core.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.Module._load (internal/modules/cjs/loader.js:841:27)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at n (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/jiti/dist/v8cache.js:2:2364)
at PluginPass.Program (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#nuxt/babel-preset-app/src/polyfills-plugin.js:15:34)
at newFn (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/visitors.js:175:21)
at NodePath._call (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/path/context.js:55:20)
at NodePath.call (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/path/context.js:42:17)
at NodePath.visit (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/path/context.js:92:31)
at TraversalContext.visitQueue (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/context.js:116:16)
at TraversalContext.visitSingle (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/context.js:85:19)
at TraversalContext.visit (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/context.js:144:19)
at Function.traverse.node (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/index.js:82:17)
at traverse (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/traverse/lib/index.js:62:12)
at transformFile (/Users/jacob/code/artistrepublik/elite-reviews/node_modules/#babel/core/lib/transformation/index.js:107:29)
at transformFile.next (<anonymous>)
friendly-errors 16:52:26
# multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
Here is my package.json:
{
"name": "my-project",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt -r dotenv/config",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"#nuxtjs/axios": "^5.12.5",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/pwa": "^3.3.4",
"#paypal/paypal-js": "^1.0.5",
"#vue/babel-preset-app": "^4.5.10",
"core-js": "^3.8.3",
"es6-promise": "^4.1.1",
"lodash": "^4.17.20",
"moment": "latest",
"moment-timezone": "^0.5.32",
"noty": "^3.2.0-beta",
"nuxt": "^2.14.12",
"nuxt-i18n": "^6.18.0",
"nuxt-route-meta": "^1.0.3",
"nuxt": "^2.14.6",
"nuxt-i18n": "^6.15.1",
"nuxt-route-meta": "^1.0.1",
"nuxt-stripe-module": "^3.0.1",
"object-to-formdata": "^4.1.0",
"pluralize": "latest",
"vee-validate": "^3.4.5",
"sib-api-v3-sdk": "github:sendinblue/APIv3-nodejs-library",
"vue-carousel": "^0.18.0",
"vue-chartist": "^2.2.1",
"vue-material-design-icons": "^4.11.0",
"vuejs-noty": "^0.1.3",
"vue-plyr": "^7.0.0",
"vuetify-media-player": "^0.8.1"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#mdi/font": "^5.9.55",
"#nuxt/types": "^2.14.12",
"#nuxtjs/style-resources": "^1.0.0",
"#nuxtjs/vuetify": "^1.11.3",
"#vue/test-utils": "^1.1.2",
"babel-jest": "^26.6.3",
"babel-plugin-component": "^1.1.0",
"cross-env": "^5.2.0",
"dotenv": "^8.2.0",
"jest": "^26.6.3",
"material-design-icons-iconfont": "^6.1.0",
"node-sass": "^4.14.1",
"nodemon": "^1.18.9",
"sass-loader": "^7.3.1",
"vue-jest": "^3.0.4"
}
}
And here is my .babelrc:
{
"env": {
"test": {
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
I have tried deleting the node_modules folder along with removing the yarn.lock file with no luck. The babel version looks correct. This error only popped up after me playing around with some code (not the package.json) - which is an unrelated error.
Any help would be appreciated!

Answer 1

#babel/preset-env updated,
use old version 7.12.17
https://www.npmjs.com/package/#babel/preset-env/v/7.12.17

Answer 2

This issue drove me crazy for a few hours too.
The solution is to add to nuxt.config.js into build section:
/*
** Build configuration
*/
build: {
babel: {
presets(env, [ preset, options ]) {
return [
[ "#babel/preset-env", options ]
]
}
},
Make sure you have that thing installed:
npm install --save-dev #babel/preset-env
or in your case with yarn
Updated:
Then I encountered another error
regeneratorRuntime is not defined
Here is working part from my config.nuxt.js
build: {
babel: {
presets({isServer}) {
const targets = isServer ? { node: 'current' } : { ie: 11 }
return [
[ require.resolve("#babel/preset-env"), { targets } ]
]
},
plugins: [
"#babel/syntax-dynamic-import",
"#babel/transform-runtime",
"#babel/transform-async-to-generator"
]
},

Answer 3

I did the following:
npm uninstall #babel/preset-env
npm install #babel/preset-env#7.12.13

Answer 4

The latest version seems to have this issue resolved, try updating Nuxt to v2.15.2
https://nuxtjs.org/docs/release-notes

Answer 5

lib/utils.js was dropped for #babel/preset-env#7.13.0 and above
as stated above installing the old 7.12.17 might work
for monorepos it may not be enough. upgrading nuxtjs to 2.15.x did the trick for me

Answer 6

I had same error when deploying to ElasticBeanstalk
Error: /var/app/current/.nuxt/client.js: Cannot find module '#babel/preset-env/lib/utils'
upgrading from "nuxt": "v2.14.12", to "nuxt": "v2.15.2", seem to have solved the problem

Answer 7

npm uninstall #babel/preset-env
npm install #babel/preset-env#7.12.17

Answer 8

I just had the same problem, There's some issue with the newest #babel/preset-env within the Nuxt.
install the old version and it should work just fine
npm i #babel/preset-env#7.12.17 -S

Answer 9

You can try to do：
// package.json
"devDependencies": {
+ "#babel/preset-env": "7.12.17",
"cross-env": "^5.2.0",
"css-loader": "^3.2.0",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"style-loader": "^1.0.0"
},
// package-lock.json
"#babel/preset-env": {
+"version": "7.12.17",
...,
"#nuxt/babel-preset-app": {
"requires": {
"#babel/preset-env": "7.12.17",
...
}
}
}