react-twitch-embed-video
react-twitch-embed-video copied to clipboard
ReferenceError: self is not defined
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
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
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.