What is Correct way of lazy loading video.js ?

[AmeyKhoje]

Description

I have tried dynamic import video.js as its bundle size is too large. But it seems not working as it is creating multiple nodes of video-js. So what is correct way of doing this.

Reduced test case

Steps to reproduce

1. Install video.js
2. use dynamic import for setting up videojs

useEffect(() => {
    (async function handleVideo() {
      if (
        !playerRef.current &&
        videoRef?.current
      ) {
        const videoElement = document.createElement('video-js');
        videoElement.classList.add('vjs-big-play-centered');
        videoRef.current.appendChild(videoElement);

        import('video.js').then(async ({ default: videojs }) => {
          const player = (playerRef.current = videojs(
            videoElement,
            options,
            () => {
              videojs.log('player is ready');
              onReady && onReady(player);
            },
          ));
        });
      } else if (playerRef.current) {
        const player = playerRef.current;
        player.autoplay(options.autoplay);
        player.src(options.sources);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options, videoRef]);

4. run the code

Errors

No response

What version of Video.js are you using?

8.6.1

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Latest chrome

What OS(es) and version(s) does this occur with?

Windows 10

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[cjg1122]

const [{ default: videojs }] =await Promise.all([ import("video.js"), import("video.js/dist/video-js.css"), ]);

[theIYD]

The size of video.es.js in the bundle is too big. How can i lazy load it in a component ?

I am on React 17, CRA 4, Webpack 4.