Using "#field in obj" causes incorrect codegen, brand check / _brand_check_field not defined

[LoganDark]

🐛 bug report

if you use #field in Class in a JavaScript or TypeScript file, it'll generate incorrect code

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

target:

    "debug": {
      "engines": {
        "browsers": "Chrome 78"
      },
      "context": "browser",
      "distDir": "dist/debug",
      "publicUrl": "/",
      "sourceMap": {
        "inline": true,
        "inlineSources": true,
        "sourceRoot": "/"
      },
      "outputFormat": "esmodule",
      "optimize": false
    }

parcelrc:

{
  "extends": "@parcel/config-default",
  "transformers": {},
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

🤔 Expected Behavior

no error

😯 Current Behavior

this typescript code

export class Repro {
  #repro: null

  constructor() { this.#repro = null }

  static [Symbol.hasInstance](obj: unknown): obj is Repro {
    return typeof obj === 'object' && obj !== null && Object.getPrototypeOf(obj) === Repro.prototype && #repro in obj
  }
}

export function repro() {
  const something = () => {}
  return something
}

generates this javascript code (during HMR)

parcelHotUpdate['gnXul'] = function(require, module, exports) {
	var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
	parcelHelpers.defineInteropFlag(exports);
	parcelHelpers.export(exports, "Repro", ()=>Repro);
	parcelHelpers.export(exports, "repro", ()=>repro);
	class Repro {
		#repro = void _brand_check_repro.add(this);
		constructor() {
			this.#repro = null;
		}
		static[Symbol.hasInstance](obj) {
			return typeof obj === "object" && obj !== null && Object.getPrototypeOf(obj) === Repro.prototype && _brand_check_repro.has(obj);
		}
	}
	function repro() {
		const something = ()=>{
			var _brand_check_repro = new WeakSet();
		}
		;
		return something;
	}
}

trying to construct the class now throws:

Uncaught ReferenceError: _brand_check_repro is not defined
    at <instance_members_initializer> (repro.ts:2:9)
    at new Repro (repro.ts:6:3)
    at <anonymous>:1:1

and even this javascript code

export class Repro {
  /** @type {null} */
  #repro

  constructor() { this.#repro = null }

  /**
   * @param {unknown} obj
   * @returns {obj is Repro}
   */
  static [Symbol.hasInstance](obj) {
    return typeof obj === 'object' && obj !== null && Object.getPrototypeOf(obj) === Repro.prototype && #repro in obj
  }
}

export function repro() {
  const something = () => {}
  return something
}

generates this code during HMR

parcelHotUpdate['5BoG0'] = function(require, module, exports) {
	var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
	parcelHelpers.defineInteropFlag(exports);
	parcelHelpers.export(exports, "Repro", ()=>Repro);
	parcelHelpers.export(exports, "repro", ()=>repro);
	class Repro {
		/** @type {null} */
		#repro = void _brand_check_repro.add(this);
		constructor() {
			this.#repro = null;
		}
		/**
   * @param {unknown} obj
   * @returns {obj is Repro}
   */
		static[Symbol.hasInstance](obj) {
			return typeof obj === "object" && obj !== null && Object.getPrototypeOf(obj) === Repro.prototype && _brand_check_repro.has(obj);
		}
	}
	function repro() {
		const something = ()=>{
			var _brand_check_repro = new WeakSet();
		}
		;
		return something;
	}
}

trying to construct that class also throws:

Uncaught ReferenceError: _brand_check_repro is not defined
    at <instance_members_initializer> (repro2.js:3:9)
    at new Repro (repro2.js:5:3)
    at <anonymous>:1:1

💁 Possible Solution

declare the variable before the class instead of shoving it into some random arrow function below the class

this code looks like part of SWC but I don't know how to identify what parcel is doing in order to break it

🔦 Context

N/A

💻 Code Sample

above

🌍 Your Environment

Software	Version(s)
Parcel	2.12.0
Node	17.1.0
npm/Yarn	Yarn 4.2.2
Operating System	Ubuntu 22.04