Parcel: 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 (eedc965377940034cf78a026d581f12098df724e)
| 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 cc75395d2d329f276d46f618446604e59429577e .

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 https://github.com/babel/babel/pull/11011#pullrequestreview-343235268

[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
[email protected] /home/alan/dev/regiontog/parcel2-bug
└─┬ [email protected]
  └─┬ @parcel/[email protected]
    ├─┬ @parcel/[email protected]
    │ └─┬ @parcel/[email protected]
    │   └── @babel/[email protected]  deduped
    ├─┬ @parcel/[email protected]
    │ ├─┬ @babel/[email protected]
    │ │ ├─┬ @babel/[email protected]
    │ │ │ └── @babel/[email protected]  deduped
    │ │ └── @babel/[email protected]  deduped
    │ ├─┬ @babel/[email protected]
    │ │ └─┬ @babel/[email protected]
    │ │   └─┬ @babel/[email protected]
    │ │     └── @babel/[email protected]  deduped
    │ ├─┬ @babel/[email protected]
    │ │ ├─┬ @babel/[email protected]
    │ │ │ └─┬ @babel/[email protected]
    │ │ │   ├─┬ @babel/[email protected]
    │ │ │   │ └── @babel/[email protected]  deduped
    │ │ │   └── @babel/[email protected]  deduped
    │ │ ├─┬ @babel/[email protected]
    │ │ │ └─┬ @babel/[email protected]
    │ │ │   └─┬ @babel/[email protected]
    │ │ │     └── @babel/[email protected]  deduped
    │ │ └─┬ @babel/[email protected]
    │ │   └─┬ @babel/[email protected]
    │ │     └── @babel/[email protected]  deduped
    │ └── @babel/[email protected]
    └─┬ @parcel/[email protected]
      └── @babel/[email protected]  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/[email protected] 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/[email protected] 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.