[Bug]: Lottie breaks in production builds (output.minify bug)

[matteom-synth]

Version

System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 137.61 MB / 36.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5
  npmPackages:
    @rsbuild/core: 1.0.1-beta.3 => 1.0.1-beta.3 
    @rsbuild/plugin-react: 1.0.1-beta.3 => 1.0.1-beta.3

Details

While migrating our companies codebase to Rsbuild (we're sooo close to enable it in production too) I discovered a bug that is blocking us: LottiePlayer (a web component) works fine in dev, but crashes the app in production. This issue seems to happen only in conjunction with imports from other libraries (e.g., in the attached repro we're importing also @datadog/browser-logs). Removing the additional library imports make the app work fine both in dev and in prod. Additionally, disabling output.minify also fixes the issue.

I created a minimail issue repro. Let me know if you need more details. Thanks!

Reproduce link

https://github.com/matteom-synth/rsbuild-issue-repro-4

Reproduce Steps

Copy pasting here the repro's README.md

Setup

Install the dependencies:

pnpm install

Reproduce the issue

1. Check local build (works fine)

Start the dev server:

pnpm dev

Check the app: you'll see it works fine.

2. Check prod build (it's broken)

Build and preview the app for production:

pnpm build & pnpm preview

❌ You'll see it erroring out with TypeError: Cannot read properties of undefined (reading 'createElement').

3. Try removing the other import (works fine)

Try removing the following:

import { datadogLogs } from "@datadog/browser-logs";
console.log("@datadog/browser-logs", datadogLogs);

And try building and previewing again: you'll see that the app works fine.

[matteom-synth]

Wondering if it's any way related to web-infra-dev/rspack#5656

[matteom-synth]

After some investigation, this seems to be related to output.minify.jsOptions.mangle.keep_classnames, so I guess it's an SWC bug. Any clue on how can we get this fixed (fwiw, the same configuration works fine in Webpack)? I don't think submitting the issue in SWC will be enough.

[chenjiahan]

Maybe this bug has been fixed by the latest version of SWC, we will update the SWC version in Rspack soon. SWC introduces many AST breaking changes recently, so the upgrade will take some time.

[chenjiahan]

@matteom-synth can you try Rsbuild v1.0.1-beta.6? Now using the latest SWC minimizer.

[matteom-synth]

@chenjiahan the issue is still there in v1.0.1-beta.6 (can be tested with the repro repo as well)

[chenjiahan]

Yes, I have reproduced this issue, it should be a bug of SWC.

You can submit an issue to the SWC repo, and it is also allowed to use Terser to replace the SWC minimizer of Rsbuild, see https://rsbuild.dev/guide/basic/configure-swc#switching-minimizer

[matteom-synth]

@chenjiahan sorry for the slow reponse, I'm on parental leave. What version of swc is being used by v1.0.1-beta.6? Asking because I'm filling a new issue in the SWC repo and from a search in the web-infra-dev org on GitHub I can only find a reference of @swc/core:1.4.0 being used today which is still an old version of swc... but maybe I'm missing something.

[chenjiahan]

@matteom-synth You can refer to Rsbuild - SWC Plugin Version

[chenjiahan]

Good news: we have bumped SWC to the latest version and the issue minification has been fixed by SWC: