Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

import error #29

Open
colinricardo opened this issue Jun 10, 2021 · 15 comments
Open

import error #29

colinricardo opened this issue Jun 10, 2021 · 15 comments
Labels
bug Something isn't working

Comments

@colinricardo
Copy link

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 🤔

image

@devcshort
Copy link
Owner

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.

@devcshort devcshort added the bug Something isn't working label Jun 10, 2021
@colinricardo
Copy link
Author

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
Copy link
Author

colinricardo commented Jun 10, 2021

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

image

@devcshort
Copy link
Owner

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
Copy link
Owner

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
Copy link
Author

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

@colinricardo
Copy link
Author

Version 2.0.0 working great, thanks!

@devcshort
Copy link
Owner

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
Copy link

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

@jannisringwald
Copy link

Same here

@devcshort
Copy link
Owner

@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
Copy link

tgwow commented Sep 14, 2021

Same issue here, using dynamic import solved.

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

@devcshort
Copy link
Owner

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

@vhalllive
Copy link

Same issue here, using dynamic import solved.

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

Using Dynamic import in Next.js helped 😃

@Kelechiokpani
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

7 participants