ReferenceError: Worker is not defined in React/Next.js applications

[danilo-css]

Overview

I am using dotlottie-react in a React/Next.js application.

Have updated it from 0.7.2 to 0.8.6 as per the git diff below:

On the new version, I get the following error after running npm run build:

ReferenceError: Worker is not defined

Didn't get this error in the old version.

I am not sure how, but perhaps this can be solved in the Next.js app side, since this seems to be related to the behavior of Next.js trying to server side render and now there are workers in the package, which are not compatible with server side rendering. Just wanted to let you guys know so perhaps you can come up with a fix and add it to the documentation for Next.js users?

Using the old version with:

npm install @lottiefiles/dotlottie-react@0.7.2

seems to be the solution for the time being.

Consuming repo

This a basic create-next-app repo that just has a home page with a single dotlottie-react animation: dotlottie-nextjs-worker-not-defined-bug

The error can be reproduced cloning the repository, using npm install and then npm run build.

Labels

• [x] Add the Type: Bug label to this issue.

[skstef]

This happens because @lottiefiles/dotlottie-react@0.8.6 expects window.Worker to be present during Server-Side Rendering.

As a workaround, you can create a separate component for the DotLottie animation and import it using next/dynamic. This way, you will ensure that the code inside lottiefiles/dotlottie-react library will be executed only on the client side.

Example:

// DotLottieAnimation.tsx

import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import React from "react";

const DotLottieAnimation: React.FC = () => {
  return <DotLottieReact src="/animation.lottie" loop autoplay />;
};

export default DotLottieAnimation;

// AnimationContainer.tsx
import dynamic from "next/dynamic";

const DotLottieAnimation = dynamic(() => import("./DotLottieAnimation"), {
  ssr: false,
});

export const AnimationContainer: React.FC = () => {
  return <><DotLottieAnimation  /></>
}

[danilo-css]

This happens because @lottiefiles/dotlottie-react@0.8.6 expects window.Worker to be present during Server-Side Rendering.

As a workaround, you can create a separate component for the DotLottie animation and import it using next/dynamic. This way, you will ensure that the code inside lottiefiles/dotlottie-react library will be executed only on the client side.

Example:

// DotLottieAnimation.tsx

import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import React from "react";

const DotLottieAnimation: React.FC = () => {
  return <DotLottieReact src="/animation.lottie" loop autoplay />;
};

export default DotLottieAnimation;

// AnimationContainer.tsx
import dynamic from "next/dynamic";

const DotLottieAnimation = dynamic(() => import("./DotLottieAnimation"), {
  ssr: false,
});

export const AnimationContainer: React.FC = () => {
  return <><DotLottieAnimation  /></>
}

This does work! Thanks.

[theashraf]

One improvement for dotlottie-react is to add the "use client" directive in the component modules.

https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs

[damnitrahul]

Hey @theashraf I'm still seeing the issue even after updating to 0.8.7