Arrow function class fields transform `this` to `undefined`

🐛 bug report

I’m not sure whether this is a parcel or a babel issue but given the following Code

class DrawingArea extends React.Component<...> {
  private setCanvas = (canvas) => {
    this.setState(state => ({ ...state, canvas }));
  }
}

the transpiled result tries to call setState on undefined like so:

class DrawingArea extends _reactDefault.Component {
  setCanvas = canvas => {
    undefined.setState(state => ({ ...state, canvas }));
  };
}

This might be the same issue as this.

I can fix this issue for prod builds with a custom browserslist configuration but it will still occur in development builds.

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

package.json:

{
  "scripts": {
    "start": "parcel serve --hmr-port 1235 src/index.html",
    "build": "parcel build src/index.html --no-minify"
  },
  "devDependencies": {
    "@parcel/validator-typescript": "^2.0.0-nightly.488",
    "glob": "^7.1.6",
    "http-proxy-middleware": "^1.0.3",
    "parcel": "^2.0.0-nightly.486",
    "sass": "^1.26.5",
    "typescript": "^3.8.3"
  }
}

🤔 Expected Behavior

this should not be replaced with undefined in class fields as the scope is well defined (the class instance).

😯 Current Behavior

this is replaced with undefined.

💻 Code Sample

https://github.com/maxjoehnk/remote-party-games/tree/feature/broken-build/applications/web-client

The snippet above is from this file

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-nightly.486
Node	v15.4.0
npm/Yarn	yarn 1.22.10
Operating System	Linux

[aminya]

Out of the topic of this issue but my recommendation is to not use anonymous functions when the function is named. Arrow functions are meant to be passed to other functions when they are unnamed. When you assign an anonymous function to a named variable, you have already named it, so this is not considered a good idea.

Also, from the performance perspective, doing this may prevent the browser engine to inline the calls to these lambdas because the arrow functions are usually calculated during runtime.

Benchmarks

About 50% slower than a free function and 10% slower than a method function. You may not notice it in a simple function that calls this.setState which probably will not be inlined anyway, but when inlining is important it can have a huge effect.

https://jsbench.me/g4kjcq9j3s/1

cc: @rinick @maxjoehnk @mischnic

[mischnic]

Related code: https://github.com/parcel-bundler/parcel/blob/f89e5ef87fcb58e6131475b5218f188cc231a1d9/packages/transformers/js/src/visitors/modules.js#L197-L207

Introduced by https://github.com/parcel-bundler/parcel/pull/4366