Latest Nuxt v2.15.7 install with babel "loose" option warnings

Question

I've created a brand new project with npx create-nuxt-app my-cool-project but I do have some errors when running yarn dev.

Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods. 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-property-in-object", { "loose": true }] to the "plugins" section of your Babel config.

Do you have any idea about this one? It reminds me of this other issue: Nuxt js - Fresh install of nuxt 2.14.6 contains babel "loose option" warnings

Mazel

Answer 1

This issue is indeed back as shown in this Github issue

https://github.com/nuxt/nuxt.js/issues/9224#issuecomment-893263501

This happens if your Nuxt version is between 2.15.5 and 2.15.7 (I think).

A temporary solution could be adding this to your nuxt.config.js file, as suggested here

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

      // or with JUST the line below 
      ['@babel/plugin-proposal-private-property-in-object', { loose: true }]
    ],
  },
}

A definitive fix will probably be shipped shortly, feel free to subscribe to the Github issue to be notified of the latest updates.

---

EDIT: This will be fixed once this PR is merged and there's a new release: https://github.com/nuxt/nuxt.js/pull/9631

Mazel

Answer 2

As for me helps this modification on answer above:

yarn add --dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object

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

Pazpaza

Answer 3

I just did yarn add "@babel/plugin-proposal-private-methods" and the warnings disappeared

Unrepair

The issue might have been fixed for 3 years indeed. Anyway, you should use Nuxt3. – Mazel