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.

[alan-agius4]

I created a minimal reproduction and have reported the issue to Terser: terser/terser#1539

[teolag]

Is there some easy way to avoid this bug? Do I have to revert back to angular 17?
This makes all my builds break in production.
Isn't this really serious or am I missing something? 😄

[JeanMeche]

The fix is available in 18.1.0-rc.0. v18.1 is expected to be released next week.
My bad it's not.

[alan-agius4]

The fix is available in 18.1.0-rc.0. v18.1 is expected to be released next week.

This is not yet fixed upstream terser/terser#1539, will try to investigate if we can rollback terser to a previous version. Alternatively, you can update to the application builder which doesn’t make use of terser.

[kfrederix]

@teolag what I did to work around this, is just add the matRipple directive on any element in your code (and disable it). It's a dirty workaround, but unblocks the upgrade to angular 18 when you are facing this issue...

(Upgrading to the application builder would be better of course, but I'm working on that and will take some more time)

[teolag]

@kfrederix Thank you for another work around.
For me @alan-agius4 solution to upgrade to the application builder was really simple and something I had been planning to do anyway.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}