Reactjs 无法使 `hellosignembedded` 与 TS 项目中的 `nextdynamic` 一起使用

编辑:

我现在明白了，事情变得Flutter 朔迷离了.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;
// 
// };