Next Js with react-xarrows 给出错误“ReferenceError: Element is not defined”答案

【问题标题】：Next Js with react-xarrows gives error "ReferenceError: Element is not defined"Next Js with react-xarrows 给出错误“ReferenceError: Element is not defined”
【发布时间】：2021-07-12 06:28:44
【问题描述】：

我正在尝试构建一个应用程序，我想在其中显示连接组件之间的箭头。我发现的一个很棒的项目是react-xarrows，但是当我尝试在我的代码中使用它时，我看到了一个错误：

ReferenceError: 元素未定义。

以下是我的tsconfig.js

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "target": "es5"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

【问题讨论】：

标签： reactjs typescript dom next.js

【解决方案1】：

该错误很可能发生，因为react-xarrows 使用了在服务器端呈现期间服务器上不可用的 DOM API。

要解决这个问题，您可以动态导入 react-xarrows 和 ssr: false 以仅在客户端加载它。

// Component where 'react-xarrows' is used

import dynamic from 'next/dynamic';

const Xarrow = dynamic(() => import('react-xarrows'), {
    ssr: false
});

【讨论】：