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.

score 80 · Accepted Answer · edited May 02 '21 at 06:47

80

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

edited May 02 '21 at 06:47

kissu

40,416
14
65
133

answered May 02 '21 at 05:40

Jorge Granados

859
8
4

Feel free to check my answer here: https://stackoverflow.com/questions/68663581/latest-nuxt-v2-15-7-install-with-babel-loose-option-warnings or in this question here: https://stackoverflow.com/a/67466363/8816585 @Anthony – kissu Aug 09 '21 at 01:10

score 31 · Answer 2 · edited Aug 09 '21 at 07:22

31

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

edited Aug 09 '21 at 07:22

kissu

40,416
14
65
133

answered Aug 09 '21 at 05:35

Андрей Пархоменко

411
4
4

3

`@babel/plugin-proposal-private-property-in-object` is enough, no need to have all of them. – kissu Aug 09 '21 at 07:22
Thank you. I am using nuxt@2.14.0 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. – Muge Jan 25 '22 at 09:12

score 18 · Answer 3 · answered May 03 '21 at 15:34

18

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.

answered May 03 '21 at 15:34

Sebastian Landwehr

359
1
7

3

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 – Petercopter May 03 '21 at 18:47
Np, just wanted to add for completeness and for others. – Sebastian Landwehr May 03 '21 at 22:09
2

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 May 05 '21 at 14:15
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 May 07 '21 at 15:18
It seems to be fixed with 2.15.5. cheerio . – Sebastian Landwehr May 09 '21 at 21:17
2

It's just the mods having a power trip, as per usual on SO. This answer was vital to me frankly – Joe Early Aug 05 '21 at 19:41

kissu · Answer 4 · 2021-08-09T01:10:59.027

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

zarpio · Answer 5 · 2021-08-07T20:11:47.230

3

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

edited Aug 07 '21 at 20:11

answered Aug 07 '21 at 20:06

zarpio

10,380
8
58
71

1

Is is happening if the `nuxt` version is between `2.15.5` and `2.15.7`. – kissu Aug 07 '21 at 20:10
Valid answer for `nuxt: 2.15.7` – mervasdayi Aug 10 '21 at 09:21

score 0 · Answer 6 · answered Jun 19 '23 at 16:56

0

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

answered Jun 19 '23 at 16:56

tngeene

370
2
7

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

6 Answers6

More recent update for Nuxt 2.15.7

Linked