next.js: SVGs (specifically Lottie file SVG json) not rendering properly in 13.0.3

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,
}

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!

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

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 💚 now, so we will look into this. Made it minimal here: https://github.com/balazsorban44/nextjs-42801

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

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.

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",

@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.

@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.

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