ReferenceError: self is not defined

[jordanlambrecht]

Using typescript, function components, tailwind, and nextjs. Full error:

Object.<anonymous>
file:///Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/react-twitch-embed-video/dist/index.js (1:282)
Module._compile
internal/modules/cjs/loader.js (1072:14)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1101:10)
Module.load
internal/modules/cjs/loader.js (937:32)
Function.Module._load
internal/modules/cjs/loader.js (778:12)
Module.require
internal/modules/cjs/loader.js (961:19)
require
internal/modules/cjs/helpers.js (92:18)
Object.<anonymous>
file:///Users/jordanlambrecht/dev-local/PB-Oct-22/node_modules/react-twitch-embed-video/index.js (1:18)
Module._compile
internal/modules/cjs/loader.js (1072:14)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1101:10)

code:

import TwitchEmbedVideo from 'react-twitch-embed-video'

function About_Twitch() {
   <section className='relative mt-48 mb-4 h-full' id='twitch'>
          <TwitchEmbedVideo
            allowfullscreen
            autoplay
            channel='pixelbakery'
            chat='undefined'
            layout='video'
            muted
            onPlay={function noRefCheck() {}}
            onReady={function noRefCheck() {}}
          />
    </section>
  )
}
export default About_Twitch

Any ideas? The code is directly copy/pasted from the generator on Storybook

[jordanlambrecht]

AHA! Got it. Needs to be imported dynamically if you're using nextjs.

import dynamic from 'next/dynamic'

const ReactTwitchEmbedVideo = dynamic(() => import('react-twitch-embed-video'), {
  ssr: false,
})

I'm going to leave this open and let you close it so you can see it and decide if you want to make mention in your docs about it

[talk2MeGooseman]

Makes sense that this would need a dynamic import since its dependent on the library being successfully being loaded on the page before it can work its mojo. I haven't worked with nextjs but if you have suggestions to adjust code to make it just work let me know. If I think I will add your code snippet to the readme as a usage recommendation.