Lottie in Next.js 13 TypeError: Class extends value undefined is not a constructor or null

[CTOverton]

Overview

Using lottie-react in a Next.js 13 project with typescript, using the player on a page using Next.js 13's new app directory setup, on page load there is an error.

Next 13 docs https://nextjs.org/blog/next-13#app-directory-beta

Core error

Server Error
TypeError: Class extends value undefined is not a constructor or null

Full error

error - (sc_server)\node_modules\@lottiefiles\react-lottie-player\dist\lottie-react.js (15:144) @ __extends
error - TypeError: Class extends value undefined is not a constructor or null
    at __extends (webpack-internal:///(sc_server)/./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.js:44:53)
    at eval (webpack-internal:///(sc_server)/./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.js:7064:12)
    at eval (webpack-internal:///(sc_server)/./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.js:7311:2)
    at Object.(sc_server)/./node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.js (C:\Users\overt\Developer\blueprint\.next\server\app\page.js:538:1)
    at __webpack_require__ (C:\Users\overt\Developer\blueprint\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./app/page.tsx:7:90)
    at Object.(sc_server)/./app/page.tsx (C:\Users\overt\Developer\blueprint\.next\server\app\page.js:527:1)
    at __webpack_require__ (C:\Users\overt\Developer\blueprint\.next\server\webpack-runtime.js:33:42)
    at Object.page (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=C%3A%5CUsers%5Covert%5CDeveloper%5Cblueprint%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=C%3A%5CUsers%5Covert%5CDeveloper%5Cblueprint&isDev=true&tsconfigPath=tsconfig.json!:19:114)
    at collectGenerateParams (C:\Users\overt\Developer\blueprint\node_modules\next\dist\build\utils.js:710:194) {
  type: 'TypeError',
  page: '/'
}
null

package.json

"dependencies": {
    "@lottiefiles/react-lottie-player": "^3.4.7",
    "next": "^13.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
"devDependencies": {
    "@types/node": "18.11.6",
    "@types/react": "18.0.23",
    "@types/react-dom": "18.0.7",
    "autoprefixer": "^10.4.12",
    "eslint": "8.26.0",
    "eslint-config-next": "^13.0.0",
    "postcss": "^8.4.18",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "tailwindcss": "3.0.5",
    "typescript": "4.8.4"
  }

My code app/page.tsx

import React from 'react'
import { Player, Controls } from '@lottiefiles/react-lottie-player';

export default function Page() {
  return (
    <div>
      <Player
        autoplay
        loop
        src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
        style={{ height: '300px', width: '300px' }}
      >
        <Controls visible={true} buttons={['play', 'repeat', 'frame', 'debug']} />
      </Player>
    </div>
  )
}

Consuming repo

What repo were you working in when this issue occurred?

My own private repo using https://github.com/LottieFiles/lottie-react

Labels

• Add the Type: Bug label to this issue.

[github-actions]

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.

[v1s10n-4]

This package doesn't seem to support server components behaviors, as suggested by nextjs documentation we'll have to wrap the Player component inside a client-component to make it work.

"use client";
import { Player } from "@lottiefiles/react-lottie-player";

export default Player;

[github-actions]

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.