Transformation of static blocks breaks existing code
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 48/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- angular, babel, typescript, webpack
- Domain
- build-system, cli
Research direction
Start with the linked angular-monaco-repro repository and compare builds using @babel/plugin-transform-class-static-block 7.27.1 and 7.28.3 through the Webpack builder. Trace where the plugin enters the Angular CLI build, then verify that the generated CodeEditorWidget no longer throws the reported super-constructor error with the current plugin version.
Written by the indexing model from the issue text.
Description
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
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 16h 35m
- Merged PRs (30d)
- 176
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from angular/angular-cli
-
area: @angular/build gemini-triaged
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
angular/angular-cli#33055 · 1 comment · 3 reactions ·
-
area: @angular/build gemini-triaged
Difficulty 4/5 3-5 days Newbie friendliness 72/100
angular/angular-cli#34137 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 1 assignee ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 1 assignee ·
All issues in angular/angular-cli
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
ontola/atomic-server#1625 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
melgarafael/DeskcommCRM#1451 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 82/100
-
bug via-triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
bot:ai-assisted component:compact-js status:untriaged
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
midnightntwrk/midnight-sdk#403 ·