Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Transformation of static blocks breaks existing code

Aperta
#31,674 8 commenti 3 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
angular, babel, typescript, webpack
Ambito
build-system, cli

Direzione di ricerca

Inizia dal repository angular-monaco-repro collegato e confronta le build usando @babel/plugin-transform-class-static-block 7.27.1 e 7.28.3 tramite il Webpack builder. Traccia il punto in cui il plugin entra nella build di Angular CLI, quindi verifica che il CodeEditorWidget generato non generi più l’errore del super-constructor segnalato con la versione corrente del plugin.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
27k
Fork
11.8k
Merge medio
17h 25m
PR unite (30g)
183

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di angular/angular-cli

Tutte le issue di angular/angular-cli

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.