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.

Solution 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 }]
    ]
  }
}

Solution 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 }]
    ]
  }  
},

Solution 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.

Solution 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

Solution 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 }]
    ],
  },
}

View more solutions

Comments

[emptywalls]

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

[Sebastian Landwehr]

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

[Sebastian Landwehr]

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

[Sebastian Landwehr]

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.

[Sebastian Landwehr]

It seems to be fixed with 2.15.5. cheerio 🥳.

[Joe Early]

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

[kissu]

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

[kissu]

Feel free to check my answer here: stackoverflow.com/questions/68663581/… or in this question here: stackoverflow.com/a/67466363/8816585 @Anthony

[kissu]

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

[mervasdayi]

Valid answer for nuxt: 2.15.7

[Muge]

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.