-
-
Notifications
You must be signed in to change notification settings - Fork 7.9k
Closed as not planned
Labels
bug: upstreamBug in a dependency of ViteBug in a dependency of Vitep3-minor-bugAn edge case that only affects very specific usage (priority)An edge case that only affects very specific usage (priority)
Description
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.4Used Package Manager
npm
Logs
No response
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.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
bug: upstreamBug in a dependency of ViteBug in a dependency of Vitep3-minor-bugAn edge case that only affects very specific usage (priority)An edge case that only affects very specific usage (priority)