时间戳

首页 > 解决方案 > 如何在 Gatsby 中使用 Fabric？

reactjs - 如何在 Gatsby 中使用 Fabric？

问题描述

我在 gatsby 中使用织物很好，但是当我构建网站时出现错误：

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")
  }
})()

我该如何解决？

标签： reactjsjsxfabricjsgatsby

解决方案

似乎织物正在使用全局对象（例如window或document）来制作它们的东西。gatsby develop在浏览器端编译，这些全局对象总是被定义的。另一方面，当你运行gatsby build代码时，在 Node 服务器中编译，显然这些变量还没有定义。

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

  • 在要导入结构依赖项的组件中，只需使用：

    if (typeof window !== `undefined`) {
   const module = require("module")
}

    在您的情况下，您将无法解构fabric为 aprop因为它尚未定义，您将需要使用useEffect钩子。

  • gatsby-node.js通过添加以下内容来修复第三方模块导入：

      if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /fabric/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

    基本上，使用此代码段，您正在为nullwebpack 配置中的冲突模块设置一个加载器，以避免代码破坏。/fabric/是一个正则表达式，它将匹配下面的文件夹，node_modules因此请检查路径和命名是否正确

您可以查看调试 HTML 构建以获取更多信息。

推荐阅读