Плеер Lott ie не загружается при использовании в качестве модуля js

Question

Я пытаюсь использовать лот ie проигрыватель веб-компонента. Я следовал их инструкциям на github и установил его с npm:

npm install --save @lottiefiles/lottie-player

Добавил ie игрок lott * к html следующим образом:

    <header>
        <div>
            <lottie-player 
                src="https://assets7.lottiefiles.com/datafiles/gbQKQKT9Z0WGdT9/data.json"  
                background="transparent"  speed="0.5"  
                style="width: 30px; height: 30px;"  
                loop 
                controls 
                autoplay>
            </lottie-player> 
        </div>
        <h1>SIM</h1>
    </header>

И в моем главном. js файле я импортирую lott ie -player:

import "@lottiefiles/lottie-player";

Но проигрыватель lott ie не загружается в html таким образом. Когда я импортирую скрипт с CDN, он работает. Как я могу заставить его работать с импортом в мои js файлы?

Answer 1

В следующем примере используется lottie-web вместо lottie-player

import React, { useEffect, createRef } from 'react';
import lottie from 'lottie-web';

const LottieWrapper = () => {
  let animationContainer = createRef<HTMLDivElement>();

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: animationContainer.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      // animationData: // local json file,
      path: 'https://assets2.lottiefiles.com/packages/lf20_6UVhfF.json',
    });
    return () => anim.destroy(); // optional clean up for unmounting
  }, [animationContainer]);

  return (
    <div className="App">
      <div>Bodymovin Animations in React</div>
      <div className="animation-container" ref={animationContainer} />
    </div>
  );
};

export default LottieWrapper;