TypeError: Cannot read property 'setChannel' of undefined

[johndevor]

[johndevor]

When changing the channel

[moonstar-x]

Hey there, quick questions:

1. Are you using any sort of server side rendering or just plain React?
2. If you open the Network inspector of your browser, do you see a request to the following URL: https://player.twitch.tv/js/embed/v1.js?
3. I see the trace shows the error in a file that is not inside node_modules, Are you trying to use the source code directly or are you using the package from npm? (which is packed and transpiled to work in the browser since it's written in ES6 and browser js does not recognize the import statement which is probably what's causing this issue).

[johndevor]

1. It's client-side rendered, however I'm rendering the embed inside a web component. And to be clear, it does work, just can't change the channel. I made a hacky workaround:

const reloadChannel = () => {
    if (!channelReloaded) {
      setTimeout(() => {
        setChannelReloaded(true);
      }, 250);
    }
  };

2. I see this, looks like a call to https://gql.twitch.tv/gql but I'm not seeing v1.js

3. I'm using yarn @ "react-twitch-embed": "^2.1.0"

[moonstar-x]

I'm not very familiar with web components. Does this mean that you're not using React to render your page? I'm a bit surprised that the embed even shows up if you have no requests to https://embed.twitch.tv/embed/v1.js since the component downloads this script and adds it to your HTML body the first time that componentDidUpdate() is called.

How exactly does your project work? Like I said I'm not very familiar with web components. If I had to guess, I would say that inside TwitchEmbed, _createEmbed() is not being called since that method is the one that will set the this.player object once the embed is ready. But if that was the case, I have no idea why your workaround works. Is it maybe because you're changing more props at the same time (not only channel since the line that is throwing the error only gets executed if the only prop that changed is channel).

[moonstar-x]

I just realized why this is happening, you're updating the channel prop way too soon (before the player is initialized to be specific). I'll have to refactor the componentDidUpdate method to avoid this error.

[johndevor]

Ah, ok. Thanks for looking into this! That makes sense.

On Oct 8, 2020 at 6:51:30 PM, moonstar-x notifications@github.com wrote:

I just realized why this is happening, you're updating the channel prop way too soon (before the player is initialized to be specific). I'll have to refactor the componentDidUpdate method to avoid this error.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/moonstar-x/react-twitch-embed/issues/26#issuecomment-705863445, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAASQMY7GAJTR5HQ2ORAFMLSJY67FANCNFSM4R47LYJA .

[moonstar-x]

Hi there, sorry for the long hiatus.

I'm gonna close this issue due to inactivity. However, I have just updated this package to version 3.0.1 with #37.

Any reference to window or document have been moved to useEffect() which should be executed in the client for SSR apps.

If you feel this was a mistake, feel free to re-open this issue.

Thanks!