Got Uncaught TypeError: (0 , import_react3.useSyncExternalStore) is not a function

[karthest]

Node : v14.17.2 React : v17.0.2 Code :

import React from 'react'
import './index.scss'
import DotLottie from './assets/lottie/full/data.lottie?url'
import { DotLottiePlayer, Controls } from '@dotlottie/react-player';
import '@dotlottie/react-player/dist/index.css';

const App = (): JSX.Element => {

  return (
    <>
      <DotLottiePlayer
        src={DotLottie}
        autoplay
        loop
      >
        <Controls></Controls>
      </DotLottiePlayer>
    </>
  )
}

export default App 

Got this error:

and the lottie animation didn't show as expect.

[afsalz]

@karthest, Thank you for your interest in our react-player.

Currently, our react-player is designed to support React version 18 and above. As a result, features like useSyncExternalStore are implemented specifically for React 18.

We recommend using our player-component for older versions of React.

[karthest]

Thanks for your explaination. player-component works great.

[karthest]

Another question : Is there a way to pack lottie json file and required images into a dotlottie file ? Or how to deal with assets ?

[afsalz]

@karthest Yes, packing assets within .lottie is possible. Our dotlottie-js library may help with your use case. Also, please refer to dotlottie structure to learn more about the dotlottie structure.

[karthest]

Thanks a lot