bug(Ripple): error "Cannot set properties of undefined (setting 'FADING_IN')"

[kfrederix]

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

17.3

Description

An error is thrown for production builds when following conditions are met:

1. The angular appplication makes uses of material (for example MatDialog) but does not make use of MatButton (or MatRipple directly)
2. The webpack builder is used (@angular-devkit/build-angular:browser)
3. It happens only when building in production mode (not in development mode)

The following error is thrown in JS console, and the app is broken:

TypeError: Cannot set properties of undefined (setting 'FADING_IN')

Note: since I could not reproduce this with the esbuild builder (@angular-devkit/build-angular:application), this could very well be an issue related to the angular-cli instead of material itself. Since I am not 100% sure, I am reporting it here.

Reproduction

StackBlitz link: https://stackblitz.com/edit/sjwtcm-g8jwcl?file=src%2Fexample%2Fdialog-data-example.ts
Steps to reproduce:

1. Open the StackBlitz link
2. Check JS console to see the error

Expected Behavior

No errors, app works.

Actual Behavior

App is broken, an error is visible in the JS console:

TypeError: Cannot set properties of undefined (setting 'FADING_IN')

Environment

• Angular: 18.0.3
• CDK/Material: 18.0.3
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

This is likely a tooling issue since we aren't doing anything complicated with that enum. Transferring into the Tooling repo.

[JeanMeche]

It looks like it's a buildOptimizer issue. The issue doesn't happen withbuildOptimizer:false.

[alan-agius4]

I looked into this and found that Terser transforms the following code:

var RippleState = /* @__PURE__ */ function(RippleState2) {
  return RippleState2[RippleState2.FADING_IN = 0] = "FADING_IN", RippleState2[RippleState2.VISIBLE = 1] = "VISIBLE", RippleState2[RippleState2.FADING_OUT = 2] = "FADING_OUT", RippleState2[RippleState2.HIDDEN = 3] = "HIDDEN", RippleState2;
}(RippleState || {});

into:

var RippleState=function(RippleState2){return RippleState2[RippleState2.FADING_IN=0]="FADING_IN",RippleState2[RippleState2.VISIBLE=1]="VISIBLE",RippleState2[RippleState2.FADING_OUT=2]="FADING_OUT",RippleState2[RippleState2.HIDDEN=3]="HIDDEN",RippleState2}();

This will require further investigation to provide a minimal reproduction for the Terser developers, as it is not reproducible when using just this piece of code. It seems to be influenced by other parts of the the bundle.