Skip to content

React - Static class field initialization fails #11805

@mgomulak

Description

@mgomulak

Describe the bug

So after updating some of our dependencies we had to enable typescript's useDefineForClassFields feature. Since then, some of our legacy react class components fail to initialize their static class fields.

This error only occurs if these two conditions are met

  • The class itself is decorated
  • The static class field initialization self references another static class field

Transformations produced by webpack or a bare esbuild build seem to work just fine.

e.g.

import React from 'react';
import { observer } from 'mobx-react';

@observer
export default class Test extends React.Component {

  public static foo = 'foo';

  private static fooBar = `${Test.foo}-bar`;

  public render() {
    return <div>{Test.fooBar}</div>;
  }
}

The error happens on the initialization of fooBar because Test.foo is accessed before initialization.

Test.tsx:18 Uncaught ReferenceError: Cannot access 'Test' before initialization
    at <static_initializer> (Test.tsx:18:19)
    at Test.tsx:16:32

The transformed code

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
var _jsxFileName = "/home/projects/vitejs-static-initialization-error/src/Test.tsx";
import __vite__cjsImport0_react from "/node_modules/.vite/deps/react.js?v=d1d1a958"; const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react;
import { observer } from "/node_modules/.vite/deps/mobx-react.js?v=4f531952";
import { jsxDEV as _jsxDEV } from "/@id/__x00__react/jsx-dev-runtime";
let Test = class extends React.Component {
  static foo = "bar";
  static fooBar = `${Test.foo}-bar`;
  render() {
    return /* @__PURE__ */ _jsxDEV("div", {
      children: Test.fooBar
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 11,
      columnNumber: 12
    }, this);
  }
};
Test = __decorateClass([
  observer
], Test);
export {
  Test as default
};

Reproduction

https://stackblitz.com/edit/vitejs-static-initialization-error?file=src%2FTest.tsx

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @vitejs/plugin-react: ^2.0.0 => 2.0.0 
    vite: ^3.0.2 => 3.0.4

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug: upstreamBug in a dependency of Vitep3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions