Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Embedding a Script in NextJS with Typescript

byMR
February 13, 2024

I am attempting to embed a script from GameChanger (https://web.gc.com) and this is the code they provided me:

<!-- Put this div wherever you want the widget to be embedded -->
<div id="gc-scoreboard-widget-umpl"></div>

<!-- Put 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>

I’m using NextJS 14 with Typescript. My Component looks like this:

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>
    </>
  );
}

I’m getting the following error when trying to do this:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel 

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)
    at commitHookEffectListMount (react-dom.development.js:18071:39)
    at commitHookPassiveMountEffects (react-dom.development.js:19742:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19826:29)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
(anonymous) @ VM938:2
loadScript @ script.js:140
eval @ script.js:223
commitHookEffectListMount @ react-dom.development.js:18071
commitHookPassiveMountEffects @ react-dom.development.js:19742
commitPassiveMountOnFiber @ react-dom.development.js:19826
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19832
commitPassiveMountEffects @ react-dom.development.js:19799
flushPassiveEffectsImpl @ react-dom.development.js:22446
flushPassiveEffects @ react-dom.development.js:22398
eval @ react-dom.development.js:22188
workLoop @ scheduler.development.js:200
flushWork @ scheduler.development.js:178
performWorkUntilDeadline @ scheduler.development.js:416
Show 100 more frames
Show less

I’m not sure what my error is. I’m assuming it has something to do with not having the type information for the embed, but I’m not sure. Thank you in advance for any help.

I initially tried just copying and pasting the code in, which wouldn’t compile. CoPilot recommended that I use the dangerouslySetInnerHTML which led to my change in the code. I’m not sure what next to try.

>Solution :

This error suggests that when the second Script is run, the window.GC object is not yet defined. I’m assuming it is created by the first script, so ideally you want the second script to run only after the first one is loaded and ran.
You can do this with the onLoad function in the NextJs Script component, so you use only the first script and execute the second part after its loaded, like this:

 <Script
    src="https://widgets.gc.com/static/js/sdk.v1.js"
    onLoad={() => {
      window.GC.scoreboard.init({
        target: "#gc-scoreboard-widget-umpl",
        widgetId: "UUID HERE",
        maxVerticalGamesVisible: 4,
      });
    }}
  />

Another thing you could try is to add a useEffect hook on your component that does the init stuff only after guaranteeing the window.GC object exists, like this:

useEffect(() => {
    if (window.GC && window.GC.scoreboard) {
      window.GC.scoreboard.init({
        target: "#gc-scoreboard-widget-umpl",
        widgetId: "UUID HERE",
        maxVerticalGamesVisible: 4,
      });
    }
  }, []);
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading