SVGs (specifically Lottie file SVG json) not rendering properly in 13.0.3

[wadehammes]

trafficstars

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000 Binaries: Node: 16.17.1 npm: 8.15.0 Yarn: 1.22.19 pnpm: N/A Relevant packages: next: 13.0.3 eslint-config-next: 13.0.3 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

Firefox

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

After upgrading to Next 13.0.3, Lottie files (animated SVG json) are not rendering properly:

Should look like:

Expected Behavior

Lottie files should rendering SVG properly. Not sure exactly where this regressed in the latest.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://rhythm-marketing-git-package-updates-111122-gotrhythm.vercel.app/

To Reproduce

Have a site running 13.0.3 that uses Lottie files using react-lottie-player

[wadehammes]

Confirmed this is only happening once deployed to Vercel. SVGs render properly locally.

[jajaperson]

I'm getting a plain 404 when trying to load an svg (no lottie) on vercel, but no problems locally.

[sadam21x]

I ran into this bug even when running the build version locally. But there is no problem when using next dev

[shuvamk-dev]

Any solution for this so far?

[balazsorban44]

@wadehammes please provide a reproduction. The URL is password protected also, but a minimal code repository with easy access to the source code is always preferred to a deployed reproduction. :pray:

[wadehammes]

@balazsorban44 I don't think I will have time to create a reproduction but it seems others are having same issue, #42878 seems to have pinpointed a regression with the SWC minifier.

[shuvamk-dev]

@balazsorban44 https://www.regexfor.com/learn on this link you can see the SVGs (lottie animations in JSON format) are not rendering properly meanwhile the local file on this repo https://github.com/shuvamk/regex-for-anything are working fine.

[balazsorban44]

For future reference, I recommend always opening an issue when a reproduction can be provided @wadehammes. We cannot investigate otherwise.

If your projects are private, please create a minimal public reproduction (preferred), or you can reach out to me by e-mail/Twitter or invite me to the repo, so we have something to go off of.

Using @shuvamk's repo, I was able to reproduce the issue :green_heart: now, so we will look into this. Made it minimal here: https://github.com/balazsorban44/nextjs-42801

[wadehammes]

@balazsorban44 definitely understand but also I don't really have the time in my day to create reproductions of things outside my control, too much on my plate with work. There were enough other people here with same issue so I was hoping someone would come through, appreciate everything you guys are doing. RE: access to our repo, that is definitely something I can consider in the future, great idea.

Thanks @shuvamk for getting this to them.

[cangel111]

I ran into the same issue.

In Next.js v13 the SWC Minifier is enabled by default. https://nextjs.org/docs/advanced-features/compiler

You can fix it, at least temporarily, by adding swcMinify: false to your nextConfig.

// next.config.js

module.exports = {
  swcMinify: false,
}

[jordanlambrecht]

Also experiencing this issue. I can also confirm that the issue only persists in production. A great example is directly on the landing page for the two links below. The background and foreground SVGs are powered by Lottie like OP mentioned. Next.js build with 13.0.3: https://pixelbakery-website-c6qliha18-pixelbakery.vercel.app/ Next.js build with 13.0.2: https://pixelbakery.com source files: https://github.com/pixelbakery/pixelbakery-website

EDIT: Relevant repo files Home_Landing.tsx – Landing page component: https://github.com/pixelbakery/pixelbakery-website/blob/helpme/components/pageSpecific/home/Home_Landing.tsx

index.tsxthat the landing page lives in: https://github.com/pixelbakery/pixelbakery-website/blob/helpme/pages/index.tsx

Patterns_Blue.json– JSON file of the rendered lottie: https://github.com/pixelbakery/pixelbakery-website/blob/helpme/data/lottie_patterns/Patterns_Blue.json

PixelBakery_EasyBakeOven.json Lottie data file for the front graphic: https://github.com/pixelbakery/pixelbakery-website/blob/helpme/data/lottie_misc/PixelBakery_EasyBakeOven.json

Potentially Relevant packages and versions

"lottie-web": "5.9.6",
"next": "^13.0.2",
"react": "18.2.0",
"tailwindcss": "^3.1.8",
"react-dom": "18.2.0",
"@vercel/analytics": "^0.1.1",
"react-query": "^3.34.0",
"postcss": "^8.4.16",
"typescript": "^4.8.4",
"autoprefixer": "^10.4.9",

[DavidChouinard]

We're also having this issue, confirmed that disabling swcMinify resolves it

[balazsorban44]

Anyone having the same issue, please +1: the first comment unless you are adding a minimal reproduction (although we already confirmed the problem and are working on it). Thank you!

[smitpatelx]

Fix is merge, but not yet released as of V 13.0.4, so for now the only option is to disable swc_minify. I wish there was an exclusion option in nextjs, */.json to disable minifying json files or a single file.

For some reason, if you can't work without swc_minify , try canvas render for lottie-web. Its not a perfect solution, but might be enough for your use case.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.