如何在 Gatsby 中使用 Fabric？

Question

我在 gatsby 中使用 fabric 一切正常，但是当我构建网站时出现错误：

ERROR #98123  WEBPACK

Generating SSR bundle failed

Unexpected character '' (1:0)

File: node_modules/canvas/build/Release/canvas.node:1:0

错误来自以下代码的导入结构因为当我删除导入时一切正常

import { fabric } from "fabric"

我试过这段代码我也得到了同样的错误

const { fabric } = (() => {
  if (typeof window !== "undefined") {
    return require("fabric")
  }
})()

我该如何解决？

Answer 1

似乎 fabric 正在使用全局对象（例如 window 或 document）来制作它们的东西。 gatsby develop 是在 browser-side 中编译的，其中始终定义了那些全局对象。另一方面，当您运行 gatsby build 代码在 Node 服务器中编译时，这些变量显然尚未定义。

您有多种方法可以绕过该限制。

在导入结构依赖的组件中，只需使用：
```
if (typeof window !== `undefined`) {
   const module = require("module")
}
```
在您的情况下，您将无法将 fabric 解构为 prop，因为它尚未定义，您需要使用 useEffect 挂钩。
通过在 gatsby-node.js 中添加以下内容来修复 third-party 模块导入：
```
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /fabric/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}
```
基本上，使用此代码段，您将 null 加载器设置到 webpack 配置中的冲突模块，以避免 code-breaking。 /fabric/ 是一个正则表达式，将匹配 node_modules 下的文件夹，因此请检查路径和命名是否正确

您可以查看 Debugging HTML builds 了解更多信息。

如何在 Gatsby 中使用 Fabric？

How to use Fabric in Gatsby?

reactjs

jsx

fabricjs

gatsby