search

web-infra-dev / rsbuild

The Rspack-based build tool. It's fast, out-of-the-box and extensible.
https://rsbuild.dev/
MIT License
1.77k stars 139 forks source link

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

Closed matteom-synth closed 1 month ago

matteom-synth commented 3 months ago

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 commented 3 months ago

Wondering if it's any way related to https://github.com/web-infra-dev/rspack/issues/5656

matteom-synth commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

matteom-synth commented 3 months ago

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

chenjiahan commented 3 months ago

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 commented 3 months ago

@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 commented 2 months ago

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

chenjiahan commented 1 month ago

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

image