I've been trying to insert a script from GameChanger () and they provided me with this code:
<!-- Place this div wherever you want the widget to be displayed -->
<div id="gc-scoreboard-widget-umpl"></div>
<!-- Insert this before the closing </body> tag -->
<script src="https://widgets.gc.com/static/js/sdk.v1.js"></script>
<script>
window.GC.scoreboard.init({
target: "#gc-scoreboard-widget-umpl",
widgetId: "UUID HERE",
maxVerticalGamesVisible: 4,
})
</script>
Currently, I'm utilizing NextJS 14 with Typescript. Here is how my Component appears:
import Script from "next/script";
export default function GameChangerScoreboard() {
return (
<>
<Script src="https://widgets.gc.com/static/js/sdk.v1.js" />
<Script
id="gc-scoreboard-init"
dangerouslySetInnerHTML={{
__html: `
window.GC.scoreboard.init({
target: 'gc-scoreboard-widget-umpl',
widgetId: "UUID HERE",
maxVerticalGamesVisible: 4
});
`,
}}
/>
<div id="gc-scoreboard-widget-umpl"></div>
</>
);
}
When attempting this setup, I encountered the following error:
VM938:2 Uncaught TypeError: Cannot read properties of undefined (reading 'scoreboard')
at <anonymous>:2:31
at loadScript (script.js:140:19)
at eval (script.js:223:17)
// More error messages...
I'm uncertain about the cause of the error. Perhaps it's due to missing type information for the embed, but I'm not certain. Any assistance would be greatly appreciated.
Initially, I attempted a direct copy/paste of the code which didn't compile. Following CoPilot's suggestion, I used dangerouslySetInnerHTML which resulted in the current state of the code. I'm unsure of what my next steps should be.