fix(babel): loose option for babel class-properties and private-methods

[clarkdo]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

Fix #9224

@babel/plugin-proposal-class-properties can be removed now as it has been included in @babel/preset-env

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[pi0]

Trying this in examples/hello-world:

<script>
class TestClass {
  // Property initializer syntax
  instanceProperty = 'test';
  boundFunction = () => {
    return this.instanceProperty
  };

  // Static class properties
  static staticProperty = 'babelIsCool';
  static staticFunction = function () {
    return TestClass.staticProperty
  };
}
console.log(new TestClass().instanceProperty )

export default {
  head: {
    title: 'Home page'
  }
}
</script>

Throws a build error (only for server):

ERROR in ..../index.vue?vue&type=script&lang=js& (.../babel-loader/lib??ref--2-0!...index?vue&type=script&lang=js&) 12:19
Module parse failed: Unexpected token (12:19)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| class TestClass {
|   // Property initializer syntax
>   instanceProperty = 'bork';
|   boundFunction = () => {
|     return this.instanceProperty;
 @ ./examples/hello-world/pages/index.vue?vue&type=script&lang=js& 1:0-181 1:197-200 1:202-380 1:202-380

[clarkdo]

What’s your node version?

[pi0]

@clarkdo v14.16.1 (issues is webpack4 parser). Having plugin with loose (: false) seems not adding dependency to nuxt build (#6435)

[clarkdo]

I don't think it's a depepdency issue, I think it because your node verison supports class property, so babel won't transpile it, but webpack (old acorn) doesn't support it, I'll have a look

[clarkdo]

@pi0 Updated, can you please double check and give me a review ?

[clarkdo]

Oops, pr title is not updated. I’ll try to amend it

[hardydex]

Take a look at the following article

https://www.linkedin.com/pulse/nuxtjs-warn-though-loose-option-set-false-your-babelpreset-env-/