moonstar-x/react-twitch-embed

Getting a ReferenceError: document is not defined error in a Next.js project.

jshaw opened this issue · 4 comments

jshaw commented

The package looks great and I've tested the example out. When I try to integrate into my project I'm getting a document not defined error. I'm including the package and installed all of the dependencies and importing it like so: // import { TwitchEmbed, TwitchChat, TwitchClip, TwitchPlayer } from 'react-twitch-embed';

Do you have any ideas as to what might be going on? The errors I'm getting are below. Thanks in advance!

Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.<anonymous>
file:///Users/jshaw/Sites/vector2020/strapi-starter-next-blog/frontend/node_modules/react-twitch-embed/dist/index.js (95:21)
Module._compile
internal/modules/cjs/loader.js (1158:30)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1178:10)
Module.load
internal/modules/cjs/loader.js (1002:32)
Function.Module._load
internal/modules/cjs/loader.js (901:14)
Module.require
internal/modules/cjs/loader.js (1044:19)
require
internal/modules/cjs/helpers.js (77:18)
eval
external%20%22react-twitch-embed%22 (1:0)
Object.react-twitch-embed
file:///Users/jshaw/Sites/vector2020/strapi-starter-next-blog/frontend/.next/server/static/development/pages/event/[id].js (448:1)
__webpack_require__
file:///Users/jshaw/Sites/vector2020/strapi-starter-next-blog/frontend/.next/server/static/development/pages/event/[id].js (23:31)
moonstar-x commented

Hey there, thanks for reporting this. This may be caused by the fact that the component will download the Twitch Embed/Player scripts by adding the script tags on the HTML document. I haven't worked with next.js before but it seems that you don't get a reference to the document object. I'm gonna check this out later today to see if I can find a better way to retrieve the Twitch embed scripts.

jshaw commented

Hey! Thanks for such a quick response. Right, that would make sense. I appreciate you taking a look into this and seeing a possible solution.

Thanks,

moonstar-x commented

Hey there, I did some changes and got it to work on my local next.js app, it seemed to be indeed an issue with accessing the document object from an incorrect place, affecting mostly server-side-rendered apps. It should work now if you update your package to version 1.3.0.

Let me know if it's working now for you so I can close this issue.

Thanks for your input!

  • 🎉1
jshaw commented

Amazing! This update in 1.3.0 is working great! Thanks for the quick fix 👍