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

[AaronBeaudoin]

Versions

• nuxt: v2.15.4
• node: v14

Reproduction

Just make a new project on CodeSandbox and you'll see the error.

Here is one I just made: https://codesandbox.io/s/serene-thunder-yl6rq

Steps to reproduce

1. Make a new Nuxt project.
2. Run it.
3. Look at the console.

What is Expected?

No random warnings.

What is actually happening?

The warning...

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.

...is spammed over and over again.

[aboda1986]

Same to me :(

[oritwoen]

For me too. Whichever version of Nuxt I'm use, it's the same. I don't know if this is caused by this, but after some time the refresh stops responding and to see the changes you have to close the process and restart "nuxt dev".

Uncaught (in promise) Error: Manifest request to /_nuxt/abc4cd8062e85682cff9.hot-update.json timed out. onreadystatechange NuxtJS

[Bogusik]

The same

[utshomax-zz]

Same problem here.

[manniL]

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

[homerjam]

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

Thanks. This works for me!

[utshomax-zz]

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?

[gsjen]

The root cause seems to be commit #6435 which explicitly sets loose: true for the babel class plugin. I was able to run my project without issue leaving loose as false - perhaps this commit is no longer needed?

[rexarvind]

how to fix this with npm

[nvrooij]

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.

[rickalex21]

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

[xtrasmal]

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.

[rickalex21]

@xtrasmal Thanks for the info. I wasn't having these problems in hugo. I started using vuepress and so far so good, no errors or warnings.

[pi0]

/cc @clarkdo

[clarkdo]

The warning will be fixed in #9232.

[kgrosvenor]

Ahh im not the only one, i'm trying to update :P thanks guys

[heyshadowsmith]

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

[clarkdo]

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

[rexarvind]

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

[rob-tech]

I see that there is a fix that has not been released yet however my nuxt projects are actually not running now that I'm getting these sudden console errors. They are just loading and hanging in a loading state. From earlier comments some people seem to still be able to run their projects. Could this be a seperate issue for me?

[rob-tech]

Also if I add the plugin: [['@babel/plugin-proposal-private-methods', { loose: true }]], to my nuxt config I get the following error: Error: Failed to load config "developit" to extend from.

[FalseHuman]

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 😊

[simllll]

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

[k16e-me]

Interesting, using

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

worked for me. Question is, what is this suddenly.

[pi0]

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.

[Quineone]

@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

[clarkdo]

@Quineone Can you provide a reproducible repo ?

[rchl]

I wonder if this resurfaced somehow as I've seen this happening just yesterday in a repo that only has the latest dependencies.

You could try on https://codesandbox.io/s/nuxt-nuxtjsi18n-base-template-2szv3.
Export it and try locally. You can even delete the lock file and node_modules and re-test.

[bhpcv252]

@clarkdo Here's one https://github.com/bhpcv252/nuxt-project.

Just created it using npx create-nuxt-app nuxt-project

Facing the same issue.

[clarkdo]

Thanks, I’ll look into it

[ghost]

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

[clarkdo]

This will be fixed in #9631.

[ghost]

This will be fixed in #9631.

Ah yes, victory!

[hardydex]

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-/

[lemonpatwari]

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

[eraloop]

thnaks it also works for me

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

[JLBlueDom]

One solution worked on Linux, a different in Windows, so I rolled them both in since I code at work on Windows and the rest of the time I'm on Linux;

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

[escael]

Hi, in the version v2.15.8 this has worked:

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

[devzom]

Hi, in the version v2.15.8 this has worked:

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

Doesn't work either ;(

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/plugin-proposal-private-property-in-object'

[therealemino]

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