代码之家  ›  专栏  ›  技术社区  ›  BigDevJames

用Typescript在NextJS中嵌入脚本

next.js typescript javascript
  •  0
  • BigDevJames  · 技术社区  · 1 年前

    我正在尝试嵌入GameChanger的脚本( https://web.gc.com )这是他们提供给我的代码: 

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

    我正在使用带有Typescript的NextJS 14。我的组件如下所示: 

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

    尝试执行此操作时出现以下错误: 

    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

    我不确定我的错误是什么。我认为这与没有嵌入的类型信息有关,但我不确定。提前感谢您的帮助。

    我最初只是尝试在中复制和粘贴代码,但无法编译。CoPilot建议我使用dangerouslySetInnerHTML,这导致了我对代码的更改。我不知道下一步该怎么做。

    1 回复  |  直到 1 年前
        1
  •  2
  •   Daniel Guedes    1 年前

    此错误表明,当运行第二个脚本时,窗口。GC对象尚未定义。我假设它是由第一个脚本创建的,所以理想情况下,您希望第二个脚本只有在加载并运行第一个脚本之后才运行。 您可以使用NextJs脚本组件中的onLoad函数来执行此操作,因此您只使用第一个脚本,并在加载后执行第二部分,如下所示: 

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

    你可以尝试的另一件事是在你的组件上添加一个useEffect钩子,它只在保证窗口后才执行初始化操作。GC对象存在,如下所示: 

    useEffect(() => {
    if (window.GC && window.GC.scoreboard) {
      window.GC.scoreboard.init({
        target: "#gc-scoreboard-widget-umpl",
        widgetId: "UUID HERE",
        maxVerticalGamesVisible: 4,
      });
    }
  }, []);
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    3 月前
    Niobos  ·  如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?
    3 月前
    Alex  ·  在轻量级中同时解构和不解构变量
    3 月前
    Ângelo Rigo  ·  ReactJS映射:如何迭代[关闭]
    3 月前
    bairog  ·  从按属性筛选的对象数组字典中创建值数组
    4 月前
    KaiMcKiernan  ·  基于Math.random()的函数在另一个函数内不起作用[关闭]
    4 月前
    David Jeong  ·  浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?
    4 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    4 月前
    user3472810  ·  Angular@Output/EventEmitter返回undefined
    4 月前
    lokiuucx  ·  JS对象属性返回未定义,尽管对象属性应该有值
    4 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号