nuxt: Babel "loose" option error spamming in console on fresh project

With yarn, please pin your babel deps manually in your package.json, then use yarn install again:

"resolutions": {
  "@babel/core": "7.13.15",
  "@babel/preset-env": "7.13.15"
}

With npm, add these as dev deps (with the same versions).

I fixed this by adding babel setting to the build section:

build: {
  babel: {
    plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
  },
},

to the nuxt.config.js file. It removes the warning, I do not have a clue what it does under the hood. Seems to work though.

@bhpcv252

// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    babel: {
      plugins: [['@babel/plugin-proposal-private-property-in-object', { loose: true }]],
    }
  }

Fixes the issue for me for time being.

This will be fixed in https://github.com/nuxt/nuxt.js/pull/9631.

Should be fixed in v.2.15.5 (PR: #9232).

You can safely revert resolutions in package.json and build.babel.plugins in nuxt.config (and it is recommended to do so to avoid having stalled patch).

In case of having same issue after upgrading to 2.15.5, please remove lock file (yarn.lock or package.lock.json), node_modules/.cache and .nuxt. If still having issues, please report here.

If having a different error after upgrading, please use a new issue to report.

@pi0 , Having same issue after upgrading to 2.15.7, but found this work for me.

plugins: [
  '@babel/plugin-proposal-class-properties',
  '@babel/plugin-proposal-private-methods',
],

https://github.com/babel/babel/issues/11622#issuecomment-638609015

Im also encounter this problem,. I was just deleted the node_modules directory, and package-lock.json,. then npm install again,… In running “npm run dev” it always shows the warning.

In nuxt.config.js

build: {
  babel: {
    plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
  },
},

Thank you, it worked for my project 😊

// Build Configuration: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build build: { babel: { plugins: [[‘@babel/plugin-proposal-private-property-in-object’, { loose: true }]], } }

Im also encounter this problem,. I was just deleted the node_modules directory, and package-lock.json,. then npm install again,… In running “npm run dev” it always shows the warning.

In nuxt.config.js

build: {
  babel: {
    plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
  },
},

With yarn, please pin your babel deps manually in your package.json, then use yarn install again:

"resolutions": {
  "@babel/core": "7.13.15",
  "@babel/preset-env": "7.13.15"
}

With npm, add these as dev deps (with the same versions).

Thanks alot. This worked

Same problem here.

@heyshadowsmith The fix has not been released yet, that’s why @pi0 reopened this issue.

Ahh im not the only one, i’m trying to update 😛 thanks guys

The warning will be fixed in https://github.com/nuxt/nuxt.js/pull/9232.

With yarn, please pin your babel deps manually in your package.json, then use yarn install again:

"resolutions": {
  "@babel/core": "7.13.15",
  "@babel/preset-env": "7.13.15"
}

With npm, add these as dev deps (with the same versions).

@manniL Thanks …It works fine for npm also. But shouldn’t the create-nuxt-app add those devDependencies by default while creating the project?

thnaks it also works for me

"resolutions": { "@babel/core": "7.13.15", "@babel/preset-env": "7.13.15" }

It maybe worth your will to review the following article. Thanks

https://www.linkedin.com/pulse/nuxtjs-warn-though-loose-option-set-false-your-babelpreset-env-/

"resolutions": {
  "@babel/core": "7.13.15",
  "@babel/preset-env": "7.13.15"
}

Thanks. This works for me!

This will be fixed in #9631.

Ah yes, victory!

I ultimately fixed it by running npm i @babel/core@7.13.15 @babel/preset-env@7.13.15, but I am unsure if #9232 squared this away unless I’m missing something.

Still happening for me in nuxt-edge, therefore I assume there is more work needed to fix this

Im also encounter this problem,. I was just deleted the node_modules directory, and package-lock.json,. then npm install again,… In running “npm run dev” it always shows the warning.

@pi0 @clarkdo I created a new project by running npx create-nuxt-app just now, and then when I ran npm run dev, I was shown this message.

 WARN  Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
        ["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.

I ultimately fixed it by running npm i @babel/core@7.13.15 @babel/preset-env@7.13.15, but I am unsure if #9232 squared this away unless I’m missing something.

I’m having this problem as well. I’m not even using babel, unless nuxt or another packages uses it?

In short, this is what the Babel website says about itself:

"Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.(source: https://babeljs.io/docs/en/)"

@rickalex21 You will be in for an extremely bumpy and information dense ride. Babeljs has been part of many javascript build tooling for a very long time and therefor shouldn’t be a surprise for any frontend developer.