Transformation of static blocks breaks existing code

未关闭
#31,674 8 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
48/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
冷清
技术栈
angular, babel, typescript, webpack
领域
build-system, cli

调研方向

从链接的 angular-monaco-repro 仓库开始,通过 Webpack builder 使用 @babel/plugin-transform-class-static-block 7.27.1 和 7.28.3 比较构建结果。跟踪该插件进入 Angular CLI 构建的位置,然后验证使用当前插件版本生成的 CodeEditorWidget 不再抛出报告中的 super-constructor 错误。

由索引模型根据 Issue 内容生成。

描述

area: @angular/build freq1: low needs: investigation severity5: regression type: bug/fix
Command

build

Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

It appears that when Angular compiles using a recent version of Babel's plugin-transform-class-static-block, with the Webpack builder, the output is transformed in such a way it breaks existing code.

Angular code compiled and bundled with @babel/plugin-transform-class-static-block@7.27.1:

let CodeEditorWidget = class CodeEditorWidget extends _base_common_lifecycle_js__WEBPACK_IMPORTED_MODULE_5__.Disposable {
  static #_ = CodeEditorWidget_1 = this;
  static #_2 = this.dropIntoEditorDecorationOptions = _common_model_textModel_js__WEBPACK_IMPORTED_MODULE_27__.ModelDecorationOptions.register({
    description: 'workbench-dnd-target',
    className: 'dnd-target'
  }); //#endregion
  get isSimpleWidget() {
    return this._configuration.isSimpleWidget;
  }
  get contextMenuId() {
    return this._configuration.contextMenuId;
  }
  constructor(domElement, _options, codeEditorWidgetOptions, instantiationService, codeEditorService, commandService, contextKeyService, themeService, notificationService, accessibilityService, languageConfigurationService, languageFeaturesService) {
    var _this;
    super();
    _this = this;

   // Omitted for brevity
};

Angular code compiled and bundled with @babel/plugin-transform-class-static-block@7.28.3:

let CodeEditorWidget = (class CodeEditorWidget extends _base_common_lifecycle_js__WEBPACK_IMPORTED_MODULE_5__.Disposable {                 
  //#endregion
  get isSimpleWidget() {
    return this._configuration.isSimpleWidget;
  }
  get contextMenuId() {
    return this._configuration.contextMenuId;
  }
  constructor(domElement, _options, codeEditorWidgetOptions, instantiationService, codeEditorService, commandService, contextKeyService, themeService, notificationService, accessibilityService, languageConfigurationService, languageFeaturesService) {
    var _this = this;
    super();

    // Omitted for brevity

  static #_ = _staticBlock = () => (CodeEditorWidget_1 = this, this.dropIntoEditorDecorationOptions = _common_model_textModel_js__WEBPACK_IMPORTED_MODULE_27__.ModelDecorationOptions.register({
    description: 'workbench-dnd-target',
    className: 'dnd-target'
  }), this);
}, _staticBlock());

The workaround, which you will also see explained in the attached reproducer, is to override the version of the Babel's plugin to 7.27.1.

I don't understand why, and under which circumstance, that plugin is injected into the compilation process.

Minimal Reproduction

Steps to reproduce can be found on the reproducer's repository: https://github.com/lppedd/angular-monaco-repro

Exception or Error
ERROR ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
  at new CodeEditorWidget (codeEditorWidget.js:69:252)
  at new StandaloneCodeEditor (standaloneCodeEditor.js:69:9)
  at new StandaloneEditor (standaloneCodeEditor.js:188:9)
  at InstantiationService._createInstance (instantiationService.js:130:24)
  at InstantiationService.createInstance (instantiationService.js:101:27)
  at Object.create (standaloneEditor.js:43:33)
  at App.ngAfterViewInit (app.ts:16:33)
  at callHookInternal (debug_node.mjs:860:14)
  at callHook (debug_node.mjs:887:13)
  at callHooks (debug_node.mjs:841:17)
Your Environment
Angular CLI: 20.3.8
Node: 22.18.0
Package Manager: npm 11.6.2
OS: win32 x64
    

Angular: 20.3.9
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------
@angular-devkit/architect       0.2003.8
@angular-devkit/build-angular   20.3.8
@angular-devkit/core            20.3.8
@angular-devkit/schematics      20.3.8
@angular/build                  20.3.8
@angular/cli                    20.3.8
@schematics/angular             20.3.8
rxjs                            7.8.2
typescript                      5.9.3
zone.js                         0.15.1
Anything else relevant?

No response

主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
16 小时 35 分钟
30 天内合并 PR
176

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。