无法使“hellosign-embedded”与 TS 项目中的“next/dynamic”一起使用

Question

正如标题所说，我无法与之hellosign-embedded合作next

我的应用程序将通过 CDN 提供服务，因此如果它无法与 SSR 配合使用，我也不会担心

const HelloSign: any = dynamic(
  (): any => {
    return import("hellosign-embedded")
  },
  { ssr: false }
)

export default function Home() {

  const client =
    typeof window !== "undefined"
      ? new HelloSign({
          allowCancel: false,
          clientId: "HELLO SIGN CLIENT ID", // DEV HelloSign Client ID
          skipDomainVerification: true,
        })
      : null

  return null
}

我不断得到TypeError: HelloSign is not a constructor

我还在 GitHub 上创建了这个问题并提供了更多信息

Answer 1

编辑：

我现在明白事情变得混乱的地方了。hellosign-embedded引用该window对象（即，导入仅需要在客户端编译阶段可见）。我看到它next/dynamic被用来导入模块。由于dynamic()返回类型ComponentType并且包含client变量位于Home函数内部，因此我错误地假设您正在尝试导入 React 组件。

事实证明，它hellosign-embedded甚至根本不是一个 React 组件，所以你不应该使用next/dynamic. 您应该能够使用 ES2020 导入来代替。您的pages/index.tsx文件将如下所示：

import type { NextPage } from "next";

const openDocument = async () => {
  // ES2020 dynamic import
  const HelloSign = (await import("hellosign-embedded")).default;

  const client = new HelloSign({
    allowCancel: false,
    clientId: "HELLO SIGN CLIENT ID", // DEV HelloSign Client ID
    skipDomainVerification: true,
  });

  client.open("https://www.example.com");
};

const Home: NextPage = () => {
  return <button onClick={() => openDocument()}>Open</button>;
};

export default Home;

忽略旧答案：

HelloSign类型为ComponentType，因此您可以直接使用存储在变量中的 JSX 元素：

// disregard: see edit above
// export default function Home() {
// 
//   const client =
//     typeof window !== "undefined" ? (
//       <HelloSign
//         allowCancel={false}
//         clientId="HELLO SIGN CLIENT ID" // DEV HelloSign Client ID
//         skipDomainVerification={true}
//       />
//     ) : null;
// 
//   return client;
// 
// };