无法使 `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 上创建了 this issue 并提供了更多信息

Answer 1

编辑:

我现在明白事情在哪里变得混乱了。 hellosign-embedded 引用 window 对象（即导入只需要在 client-side 编译阶段可见）。我看到 next/dynamic 被用来导入一个模块。由于 dynamic() returns 类型 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;
// 
// };

无法使 `hellosign-embedded` 在 TS 项目中与 `next/dynamic` 一起工作

Can't make `hellosign-embedded` work with `next/dynamic` in TS project

reactjs

dynamic

react-hooks

next.js

hellosign-api