Next.js项目中的日历嵌入问题：TypeError和其他错误

eoxn13cs 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(78)

我在尝试将Calendly嵌入到我的Next.js 13.5项目中时遇到了一些问题。我尝试了两种不同的方法，但都导致了错误。我希望有人能帮我找出哪里出了问题。

问题1：使用Calendly的脚本

我最初尝试使用他们的官方脚本嵌入Calendly，如下面的代码所示：

"use client";
import Head from "next/head";
import React, { useEffect } from "react";

export default function Calendly() {
  useEffect(() => {
    window.Calendly.initInlineWidget({
      url: "url here ",
      parentElement: document.getElementById("calendly-inline-widget"),
    });
  });
  return (
    <>
      <Head>
        <script
          src="https://assets.calendly.com/assets/external/widget.js"
          type="text/javascript"
          async
        ></script>
      </Head>
      <div
        id="calendly-inline-widget"
        style={{ minWidth: 320, height: 580 }}
        data-auto-load="false"
      ></div>
    </>
  );
}

但是，我遇到了以下错误：

TypeError: Cannot read properties of undefined (reading 'initInlineWidget')

问题2：如何使用react-accessible

作为替代方案，我尝试使用react-calendly库，但我遇到了以下错误：

Error: Object prototype may only be an Object or null: undefined

我已经在这些问题上纠结了一段时间，希望能有任何关于如何成功地将Calendly嵌入到我的Next.js项目中的指导或见解。如果您需要任何其他信息或代码片段，请让我知道。
提前感谢您的帮助！

next.js

来源：https://stackoverflow.com/questions/77222228/calendly-embedding-issues-in-next-js-project-typeerror-and-other-errors

1条答案

按热度按时间

ldfqzlk81#

要为多个路由加载第三方脚本，请导入next/script并将脚本直接包含在布局组件中，您可以找到有关此组件here的更多信息。正如你所看到的，我使用了onLoad方法，而不是像你的例子中那样使用useEffect方法，这是一个回调函数，它只在脚本加载时调用一次。

import Script from "next/script";

export default async function Layout(): Promise<JSX.Element> {
  return (
    <>
      <Script
        async
        type="text/javascript"
        src="https://assets.calendly.com/assets/external/widget.js"
        onLoad={() => {
          console.log("Script has loaded");
        }}
      />

      <div
        data-auto-load="false"
        id="calendly-inline-widget"
        style={{ minWidth: 320, height: 580 }}
      />
    </>
  );
}

很高兴知道：Next.js将确保脚本只加载一次，即使用户在同一布局中的多条路线之间导航。
据我所知，还有一个名为react-calendly的NPM包，如果其他一切都失败了，也许值得尝试一下。

赞(0）回复(0）举报 2023-10-18

我来回答

Next.js项目中的日历嵌入问题：TypeError和其他错误

1条答案

相关问题

热门标签

最新问答