为什么在使用 next/dynamic 时 Next.js 在导入时的行为与 React.js 不同？答案

【问题标题】：Why is Next.js acting differently than React.js at importing when using next/dynamic?为什么在使用 next/dynamic 时 Next.js 在导入时的行为与 React.js 不同？
【发布时间】：2021-10-19 10:00:26
【问题描述】：

我正在尝试使用从“@pdftron/webviewer”导入的 WebViewer，下面标记为 数字 1 的代码是我在 React.js 应用程序中使用的代码，它工作正常，而代码 number 2 是我在 Next.js 应用程序中使用的代码，它会引发此错误：

未处理的运行时错误类型错误：WebViewer 不是函数

代码 1（用于 React.js 应用程序）：

import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";
import "./App.css";

export default function App() {
  const viewerDiv = useRef<HTMLDivElement>(null);
  useEffect(() => {
    WebViewer({ path: "./lib", initialDoc: "./sample.doc" }, viewerDiv.current as HTMLDivElement);
  }, []);
  return (
    <div>
      <div className="webviewer" ref={viewerDiv}></div>
    </div>
  );
}

代码 2（在 Next.js 应用中使用）：

import dynamic from "next/dynamic";
const WebViewer = dynamic(() => import("@pdftron/webviewer"), { ssr: false });
import { useEffect, useRef } from "react";

export default function Editor() {
  const viewerDiv = useRef(null);
  useEffect(() => {
    WebViewer(
      {
        path: "webviewer",
        initialDoc: "http://www.africau.edu/images/default/sample.pdf",
      },
      viewerDiv.current
    );
  }, []);
  return (
    <div>
      <div className={"webviewer"} ref={viewerDiv}></div>
    </div>
  );
}

谁能解释我为什么在 Next.js 应用程序中出现此错误以及如何修复它？

更新：我也在 Next.js 应用程序中从 js 转到 ts 并收到以下警告：

'() 类型的参数 => Promise' 不能分配给 ' 类型的参数动态选项 |装载机'。类型 '() => Promise' 不可分配给类型 '() => LoaderComponent'。类型 'Promise' 不可分配给类型 'LoaderComponent'。类型 'typeof import("/home/petar/Workspace/next-ts-editor/node_modules/@pdftron/webviewer/types")' 不可分配给类型 'ComponentType | { 默认值：组件类型； }'。类型 'typeof import("/home/petar/Workspace/next-ts-editor/node_modules/@pdftron/webviewer/types")' 不可分配给类型 '{ default: ComponentType; }'。属性“默认”的类型不兼容。类型 '(options: WebViewerOptions, viewerElement: HTMLElement) => Promise' 不可分配给类型 'ComponentType'。类型 '(options: WebViewerOptions, viewerElement: HTMLElement) => Promise' 不可分配给类型 'FunctionComponent'。 “Promise”类型缺少“ReactElement”类型的以下属性：类型、道具、键

此表达式不可调用。并非所有“ComponentType”类型的成分都是可调用的。类型 'ComponentClass' 没有调用签名。

【问题讨论】：

next/dynamic 用于动态导入 React components。要动态导入常规 JavaScript 库，您可以查看 Why am I getting ReferenceError: self is not defined in Next.js when I try to import a client-side library? 中建议的解决方案。

标签： reactjs next.js

【解决方案1】：

我已设法找到解决此问题的方法。这是一个适合我的代码 sn-p，如果有更好的方法，请告诉我。

import { useEffect, useRef } from "react";

export default function Editor() {
  const viewerDiv = useRef<HTMLDivElement>(null);
  const loadViewer = async () => {
    const WebViewer = (await import("@pdftron/webviewer")).default;
    WebViewer(
      {
        path: "lib",
        initialDoc: "./sample.pdf",
      },
      viewerDiv.current as HTMLDivElement
    );
  };
  useEffect(() => {
    loadViewer();
  }, []);
  return (
    <div>
      <div className={"webviewer"} ref={viewerDiv}></div>
    </div>
  );
}

【讨论】：