Private field transform error in production mode

[mantou132]

Describe the bug

The following code does not run correctly in production mode:

const state = () => {};
Object.setPrototypeOf(state, null);

class A {
  #state = state;

  render = () => {
    this.#state();
    return 'Normal';
  };
}
document.body.innerHTML = new A().render();

Reproduction

https://stackblitz.com/edit/vitejs-vite-zzcnuj?file=src%2Fmain.ts

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vite: ^5.4.10 => 5.4.10

Used Package Manager

npm

Logs

console log:

Uncaught TypeError: v(...).call is not a function

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[mantou132]

babel typescript esbuild same behavior

[bluwy]

This is the generated code by esbuild:

var __defProp = Object.defineProperty;
var __typeError = (msg) => {
  throw TypeError(msg);
};
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
var _state;
const state = () => {
};
Object.setPrototypeOf(state, null);
class A {
  constructor() {
    __privateAdd(this, _state, state);
    __publicField(this, "render", () => {
      __privateGet(this, _state).call(this);
      return "Normal";
    });
  }
}
_state = new WeakMap();
document.body.innerHTML = new A().render();

The problem here is that because you have Object.setPrototypeOf(state, null);. The __privateGet(this, _state).call will fail because .call will no longer exist anymore.

If this is happening in babel/typescript/esbuild, then it seems like they've all made the assumption that a function pattern this way won't work. Is there a reason you're doing Object.setPrototypeOf(state, null);?

[mantou132]

@bluwy I want to have the class members as internal states while being able to update them directly, so I want to clear the object properties

@customElement('my-element')
class MyElement extends GemElement {
  #state = createState({ a: true });

  render() {
    this.#state({ a: false });
    console.log(this.#state.a);
  }
}

[sapphi-red]

If esbuild generated Function.prototype.call.call(__privateGet(this, _state), this); instead of __privateGet(this, _state).call(this);, the code works.
I think this needs to be worked on esbuild side (also for other transpilers?).