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

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/[email protected]

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/[email protected] 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