fix(web): 🐛 Prevent Worker instantiation during SSR in Next.js environment

LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.

https://developers.lottiefiles.com/docs/dotlottie-player/

MIT License

191 stars 11 forks source link

fix(web): 🐛 Prevent Worker instantiation during SSR in Next.js environment #325

Closed theashraf closed 3 months ago

theashraf commented 3 months ago

Changes:

Updated the PluginInlineWorker to check for window existence before instantiating Worker, ensuring that the worker is only created in a client-side context.
Added a conditional check in the worker export to throw an error if attempted to instantiate on the server side.
This change prevents "Worker is undefined" errors in Next.js when running during server-side rendering.
Added dotlottie-next-example to verify the fix

related #322

changeset-bot[bot] commented 3 months ago

🦋 Changeset detected

Latest commit: d4e0c035200a6eb9560dbc26f79876ae8a9289d9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

| Name | Type | | ----------------------------- | ----- | | @lottiefiles/dotlottie-web | Patch | | @lottiefiles/dotlottie-react | Patch | | @lottiefiles/dotlottie-solid | Patch | | @lottiefiles/dotlottie-svelte | Patch | | @lottiefiles/dotlottie-vue | Patch | | @lottiefiles/dotlottie-wc | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions[bot] commented 3 months ago

Coverage Report for @lottiefiles/dotlottie-web (packages/web)

Status	Category	Percentage	Covered / Total
🟢	Lines	52.23% / 30%	491 / 940
🟢	Statements	50.89% / 30%	511 / 1004
🟢	Functions	54.18% / 30%	136 / 251
🟢	Branches	54.94% / 30%	300 / 546

File Coverage

No changed files found.

Generated in workflow #1237

github-actions[bot] commented 3 months ago

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
@lottiefiles/dotlottie-web	41.61 KB (-0.04% 🔽)	833 ms (-0.04% 🔽)	219 ms (+97.33% 🔺)	1.1 s
@lottiefiles/dotlottie-web WASM	386.62 KB (0%)	7.8 s (0%)	0 ms (+100% 🔺)	7.8 s
@lottiefiles/dotlottie-react	45.45 KB (+0.01% 🔺)	910 ms (+0.01% 🔺)	214 ms (+151.97% 🔺)	1.2 s
@lottiefiles/dotlottie-vue	48.71 KB (+0.15% 🔺)	975 ms (+0.15% 🔺)	142 ms (+30.98% 🔺)	1.2 s
@lottiefiles/dotlottie-wc	48.94 KB (+0.12% 🔺)	979 ms (+0.12% 🔺)	219 ms (+107.19% 🔺)	1.2 s
@lottiefiles/dotlottie-svelte	49.62 KB (+0.17% 🔺)	993 ms (+0.17% 🔺)	78 ms (+27.36% 🔺)	1.1 s
@lottiefiles/dotlottie-solid	48.59 KB (+0.25% 🔺)	972 ms (+0.25% 🔺)	64 ms (+21.65% 🔺)	1.1 s