如何配置gatsby-config.js为canvas模块创建空节点解决Gatsby构建报错

DevOps 小满

2026-10-4

问题根因

首次语法报错的原因：你在module.exports = {}的对象内部写了exports.onCreateWebpackConfig = xxx的赋值语句，不符合JavaScript对象语法规范，对象内部仅允许定义键值对，不允许直接写变量赋值逻辑，因此触发语法错误。
二次配置后回到初始报错的原因：onCreateWebpackConfig属于Gatsby的Node API，仅能在项目根目录的gatsby-node.js文件中生效，你将这段配置写在gatsby-config.js中不会被Gatsby识别加载，webpack的空加载规则没有生效，canvas模块仍会被编译，因此回到初始报错。

正确修改方案

还原gatsby-config.js，删除所有和onCreateWebpackConfig相关的代码，仅保留插件配置，最终内容如下：

module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-portfolio-minimal",
      options: {
        siteUrl: "https://gatsby-starter-portfolio-minimal-theme.netlify.app/",
        manifestSettings: {
          favicon: "./content/images/favicon.png",
          siteName: "My Minimal Portfolio",
          shortName: "Portfolio",
          startUrl: "/",
          backgroundColor: "#FFFFFF",
          themeColor: "#000000",
          display: "minimal-ui",
        },
        contentDirectory: "./content",
        blogSettings: {
          path: "/blog",
          usePathPrefixForArticles: false,
        },
      },
    },
  ],
};

在项目根目录（和gatsby-config.js同级）新建gatsby-node.js文件，写入以下webpack规则配置：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /canvas/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}