V2: Scope Hoisting Static Class Property not Working

[garthenweb]

🐛 bug report

When using a static class property within the class itself or outside/ in another file, the reference to its class is not renamed properly.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

package.json

{
  ...
  "browserslist": ["last 2 Chrome versions", "last 2 Firefox versions"],
  ...
}

🤔 Expected Behavior

Should rename static properties within classes properly.

😯 Current Behavior

Does not rename static property which results in Uncaught ReferenceError: $c4ee6a119cd77881a886bf5cd2629a0$var$A is not defined at runtime.

💻 Code Sample

index.js

class A {
  static getTest = () => 'test';

  render() {
    return A.getTest;
  }
}

const a = new A();
a.render();

parcel build index.js

dist/index.js

!function(){class e{render(){return $c4ee6a119cd77881a886bf5cd2629a0$var$A.getTest}}e.getTest=()=>"test",(new e).render()}();

🌍 Your Environment

Software	Version(s)
Parcel	v2 (eedc965)
Node	v12.8.1
npm	v6.11.2
Operating System	Windows 10/ WSL

[mischnic]

@devongovett Should we remove our own mangler and just leave this to terser?
Does someone have a big project where you could test how this affects performance (commenting out mangleScope(path.scope, exported); in link.js). Not sure if that would affect generating code from AST considerably (and/or longer parse time for terser?).

[garthenweb]

@mischnic I ran it on one of my projects on a Mac Book Pro (13-inch, 2017, 2,3 GHz Dual-Core Intel Core i5, 6 GB 2133 MHz LPDDR) using cc75395 .

With mangleScope (cold cache)
Overall time: 7 minutes 1 second
Build Time: 418 seconds
JS File Size: 4.57 MB

Without mangleScope (cold cache)
Overall time: 6 minutes 0 second
Build Time: 358 seconds
JS File Size: 10.03 MB

With mangleScope (hot cache)
Overall time: 1 minutes 56 second
Build Time: 113 seconds
JS File Size: 4.58 MB

Without mangleScope (hot cache)
Overall time: 1 minutes 33 second
Build Time: 90 seconds
JS File Size: 10.04 MB

Does this help?

[mischnic]

JS File Size: 4.57 MB
JS File Size: 10.03 MB

Is this the output file after terser? The size should stay the same...

[garthenweb]

It is. I run the same command but removed the line of code as described.

[garthenweb]

@mischnic Just ran the version without mangling again and checked the dist file, it contains a lot of variables like $ea4db19cc89d54676751edeac66eb44$var$SHARED even though the file is minified, so I guess the renaming is not working!?

Do I need to activate this somewhere else?

[flisboac]

I took this afternoon trying to isolate this problem and understand what was happening with parcel. Was going to open a new issue, but then I found this one.

Just made a small gist with the reproduction of this bug (based on what I currently have in one of my projects), I hope it helps somehow: https://gist.github.com/flisboac/c9c6c7f475f34bb2b9b5995a0c3e1ecf

[garthenweb]

@flisboac thanks for the investigation! As far as I understand this was a bug in Babel which should be solved, but we are waiting for the next release, v7.8.4.

See babel/babel#11011 (review)

[flisboac]

@garthenweb I'm happy we already have a fix en route, this is great! Thank you! :)

[mischnic]

Babel 7.8.4 was just released.
Could someone verify that this is fixed?

[garthenweb]

@mischnic I will try to check it out at the weekend!

[regiontog]

@mischnic
My repo produces correct output if I add a dependency to @babel/traverse version 7.8.4 in my project.json. However it does not work out of the box. The version of @babel/traverse that is installed by default is 7.7.4 not 7.8.4.

npm ls @babel/traverse
parcel2-bug@1.0.0 /home/alan/dev/regiontog/parcel2-bug
└─┬ parcel@2.0.0-alpha.3.2
  └─┬ @parcel/config-default@2.0.0-alpha.3.1
    ├─┬ @parcel/packager-js@2.0.0-alpha.3.1
    │ └─┬ @parcel/scope-hoisting@2.0.0-alpha.3.1
    │   └── @babel/traverse@7.7.4  deduped
    ├─┬ @parcel/transformer-babel@2.0.0-alpha.3.1
    │ ├─┬ @babel/core@7.7.5
    │ │ ├─┬ @babel/helpers@7.7.4
    │ │ │ └── @babel/traverse@7.7.4  deduped
    │ │ └── @babel/traverse@7.7.4  deduped
    │ ├─┬ @babel/plugin-transform-typescript@7.7.4
    │ │ └─┬ @babel/helper-create-class-features-plugin@7.7.4
    │ │   └─┬ @babel/helper-replace-supers@7.7.4
    │ │     └── @babel/traverse@7.7.4  deduped
    │ ├─┬ @babel/preset-env@7.7.6
    │ │ ├─┬ @babel/plugin-proposal-async-generator-functions@7.7.4
    │ │ │ └─┬ @babel/helper-remap-async-to-generator@7.7.4
    │ │ │   ├─┬ @babel/helper-wrap-function@7.7.4
    │ │ │   │ └── @babel/traverse@7.7.4  deduped
    │ │ │   └── @babel/traverse@7.7.4  deduped
    │ │ ├─┬ @babel/plugin-transform-exponentiation-operator@7.7.4
    │ │ │ └─┬ @babel/helper-builder-binary-assignment-operator-visitor@7.7.4
    │ │ │   └─┬ @babel/helper-explode-assignable-expression@7.7.4
    │ │ │     └── @babel/traverse@7.7.4  deduped
    │ │ └─┬ @babel/plugin-transform-parameters@7.7.4
    │ │   └─┬ @babel/helper-call-delegate@7.7.4
    │ │     └── @babel/traverse@7.7.4  deduped
    │ └── @babel/traverse@7.7.4
    └─┬ @parcel/transformer-js@2.0.0-alpha.3.1
      └── @babel/traverse@7.7.4  deduped

[garthenweb]

Checked it now as well.
I see the same as @regiontog with the latest v2 branch of Parcel, even though it installs @babel/traverse@7.8.3 for me. After updating the yarn.lock by hand it works like a charm!

[regiontog]

Checked it now as well.
I see the same as @regiontog with the latest v2 branch of Parcel, even though it installs @babel/traverse@7.8.3 for me. After updating the yarn.lock by hand it works like a charm!

Ah, it's the lockfile in my project that causes my version to stay at 7.7.4! npm pulls in the newest version and sets the lockfile after npm --depth 9999 update @babel/traverse.

[Cristy94]

I have same issue with 1.12.4, with a static member being used inside a static method. Any way to fix it for 1.12.4?

[mischnic]

Maybe updating babel (delete lockfile?)

[Cristy94]

Actually in my case I solved it by refactoring my code (simplified):

With problem:

class A {
   public static updateX() {
      return A.x = Math.random();
   }
   public static x = A.updateX();
}  

Without problem:

class A {
   public static updateX() {
      return A.x = Math.random();
   }
   public static x = 0;
}
A.updateX(); 

To be noted that with --no-minify the first version works as expected. I also use --experimental-scope-hoisting, but probably not related.

[devongovett]

Seems like this is probably fixed.