Nuxt js - Fresh install of nuxt 2.14.6 contains babel "loose option" warnings

Question

I have a fresh install of nuxt version 2.14.6 and I would like to silence an error I get when I run the nuxt command:

 WARN  Though the "loose" option was set to "false" in your @babel/preset-env co
The "loose" option must be the same for @babel/plugin-proposal-class-properties,
        ["@babel/plugin-proposal-private-methods", { "loose": true }]
to the "plugins" section of your Babel config.

I'm assuming I need to override the babel config in my nuxt.config.js file, but I haven't found any helpful solutions.

Codicodices

Answer 1

Add the following to your nuxt.config.js file under the build section.

nuxt.config.js

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

Gluck

Feel free to check my answer here: #68664081 or in this question here: https://mcmap.net/q/366259/-nuxt-js-fresh-install-of-nuxt-2-14-6-contains-babel-quot-loose-option-quot-warnings @Anthony – Mete

Answer 2

Try add these in nuxt.config.js:

build: {
  babel:{
    plugins: [
      ["@babel/plugin-proposal-class-properties", { "loose": true }],
      ["@babel/plugin-proposal-private-methods", { "loose": true }],
      ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
    ]
  }  
},

Oubliette

@babel/plugin-proposal-private-property-in-object is enough, no need to have all of them. – Mete

Thank you. I am using [email protected] and getting the same warnings littering the console. Listing all of the plugins like this worked for me whereas only listing @babel/plugin-proposal-private-property-in-object did not. – Hairspring

Answer 3

I'd rather reset nuxt back to 2.15.2 and wait until it's fixed. While the above answer fixes it in the short run, those warnings on a fresh nuxt install look like a bug to me.

Carroty

Upvoted. It's always good to make sure you aren't silencing something you might actually care about, without fully understanding the ramifications. Don't mind me while I add this to my Babel config for now though... :D – Aleta

Np, just wanted to add for completeness and for others. – Carroty

Why? The current behavior is a bug (warnings on a fresh install), and it's a solution until a fixed version is available. – Carroty

Alright I got the point. It wasn't primarily meant to be a critique to the proposed solution but more of an alternative. But it's up to moderators to decide. – Carroty

It seems to be fixed with 2.15.5. cheerio 🥳. – Carroty

It's just the mods having a power trip, as per usual on SO. This answer was vital to me frankly – Frontlet

Answer 4

More recent update for Nuxt 2.15.7

It looks like some errors are back again with the latest release, more info can be found here Latest Nuxt v2.15.7 install with babel "loose" option warnings

---

This ons is fixed from Nuxt v2.15.5 as stated in this github issue: https://github.com/nuxt/nuxt.js/issues/9224#issuecomment-835742221

You can remove any resolutions and build.babel.plugins related to this bug in your nuxt.config.js configuration. Also, if needed you should reset:

• yarn.lock (or package-lock.json)
• node_modules/.cache
• .nuxt

Mete

Answer 5

package.json (When my packages were as under)

"dependencies": {
  "@nuxtjs/axios": "^5.13.6",
  "core-js": "^3.15.1",
  "nuxt": "^2.15.7",
  "vuetify": "^2.5.5"
},
"devDependencies": {
  "@nuxtjs/vuetify": "^1.12.1"
}

nuxt.config.js (Following helped me)

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

Lamm

Is is happening if the nuxt version is between 2.15.5 and 2.15.7. – Mete

Valid answer for nuxt: 2.15.7 – Vaporescence

Answer 6

For me, setting this in the package.json file worked,

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

Run yarn install afresh to install the packages

Chelsiechelsy