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

user_4816251 0
Viewed 19266

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!

babeljs nuxt.js vue.js
9 Answers
user_138028130

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"
    ]
  },
user_24370630

I did the following:

npm uninstall @babel/preset-env

npm install @babel/preset-env@7.12.13

user_57273460
user_152746740

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

user_27681240

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

user_34875790 
npm uninstall @babel/preset-env
npm install @babel/preset-env@7.12.17
user_152670910

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

user_9929660

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

enter image description here

enter image description here

user_80867500
Related