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.

[daaavy-lazer-claw]

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.

[EdwardGoomba]

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