ReferenceError: document is not defined at createTag (node >18)

[zifeo]

Overview

Using NextJS, we got:

Error occurred prerendering page "/X". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: document is not defined at createTag ...

This has been reported as a potential bug related to the node version: https://github.com/Gamote/lottie-react/issues/101.

Consuming repo

What repo were you working in when this issue occurred?

# use node 20 or 21
npx create-next-app@latest
# edit app/page.ts
# add the Player component as demo

Labels

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

[no-complect]

I'm getting the same error as well on latest node version. Switching to 18.18.2 fixed it for me.

[sonangrai]

im getting this as well on node v20+

[dzungmv]

Please 'use client' in component using this library.

[Nextjs] For me, I also separate animation lottie into single component with 'use client' in the top of file:

And import this to Server component by dynamic import:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[edwardoverthere]

This impacts more than just Next. I'm using this repo in a gatsby project am am running into the same issue. Getting the error: ReferenceError: document is not defined

[adrivelasco]

I confirm this error is gone if you dynamically import the Player component as @dzungmv suggested.

This is my solution.

// player.tsx
import dynamic from 'next/dynamic';

export const ReactLottiePlayer = dynamic(
  async () => {
    const ReactLottie = await import('@lottiefiles/react-lottie-player');
    return ReactLottie.Player;
  },
  { ssr: false }
);

// page.tsx
'use client';

import { ReactLottiePlayer } from '@/lib/lottiefiles/player';

export function Page() {
  return (
    <ReactLottiePlayer
      src="/animation.json"
      speed={1}
      loop
      autoplay
    />
  ); 
}

Tested in Next.js v14.x

[M-YasirGhaffar]

My Project was complex so dynamic import was not feasible solution. It works fine on node v18 though

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[fl0wo]

downgraded from node22 to node20

[SapirBar2]

is there any solution for node v22? I cannot use lazy loading..

[joeykamsteeg]

Any update on this issue, I also can't use lazy loading?

[JosefDuda]

It looks like this version of the player is no longer actively maintained. After encountering the same issue, I upgraded to the newer version of the player @lottiefiles/dotlottie-react , as mentioned in the current LottieFiles documentation, and everything works fine now. Sadly it's not completely 1:1, so transition requires little bit of tweaking.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[leeeunsang-tmobi]

We should run node with --no-experimental-global-navigator option. Refs

• https://github.com/airbnb/lottie-web/issues/3047
• https://nodejs.org/docs/latest-v22.x/api/cli.html#--no-experimental-global-navigator
• https://github.com/nodejs/node/issues/39540

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.