import error

[colinricardo]

trying to run the very basic example:

  const renderHlsPlayer = () => {
    return (
      <ReactHlsPlayer
        playerRef={null}
        src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
        autoPlay={false}
        controls={true}
        width="100%"
        height="auto"
      />
    );
  };

and getting this error 🤔

[devcshort]

Are you using import or require? And are you using the latest create-react-app template or a custom build process? Can you provide any additional info that may help out about your project?

I think there may be an issue with the way I'm currently building the package.

[colinricardo]

I'm using Typescript with Next.js.

This import code runs on the client:

import ReactHlsPlayer from "react-hls-player";

In case it helps, the actual HLS package runs fine imported this way:

import Hls from "hls.js"

[colinricardo]

Here's a minimal StackBlitz example: https://stackblitz.com/edit/nextjs-bgkcxa?devtoolsheight=33&file=pages/index.js

[devcshort]

Thanks @colinricardo I think I may have found the issue. Going to test it out in a create-react-app and create-next-app to see

[devcshort]

Alright, the issue is going to be a bit more than I'm able to get to at the moment. I'd recommend using version 2.0.0 or 1.1.0 in the meantime. I think I'm going to need to introduce a proper bundler for this. In version 3 I was hoping to shed off some of the heavy configurations needed with webpack and what not, and I'm pretty sure getting rid of webpack is what's causing this issue.

Thanks for bringing this too my attention

[colinricardo]

Great, thanks! I'll try one of those versions. Let me know if I can help with anything :)

[colinricardo]

Version 2.0.0 working great, thanks!

[devcshort]

Great, thanks! I'll try one of those versions. Let me know if I can help with anything :)

If you're familiar with creating react packages with typescript and might be able to point me in the right direction that'd be helpful. I'm reading through some articles trying to figure out the best way for compatibility.

[ioram-devi]

React +Nextjs latest version + react-hls latest = Not working: import error..

[jannisringwald]

Same here

[devcshort]

@yuri-devi @iMJumpmxn I'm not sure when I'll get a chance to look in to this. In the meantime, you should be able to npm install react-hls-player@2.0.0. There were some api changes between v2 and v3, but nothing too drastic.

[tgwow]

Same issue here, using dynamic import solved.

const Player = dynamic(
  () => import('react-hls-player'),
  { ssr: false },
);

[devcshort]

@tgwow I was thinking this may be the case, but haven't had the time to look in to it. Thanks for sharing!

[vhalllive]

Same issue here, using dynamic import solved.

const Player = dynamic(
  () => import('react-hls-player'),
  { ssr: false },
);

Using Dynamic import in Next.js helped 😃

[Kelechiokpani]

Same issue here, using dynamic import solved.

const Player = dynamic(
  () => import('react-hls-player'),
  { ssr: false },
);

@tgwow thanks for sharing this Dynamic Import Solved my build issue