Gatsby构建报错：WebpackError: TypeError: apiFn is not a function求助

• 排查依赖版本冲突

  • 运行npm ls webidl-conversions common-tags（npm环境）或yarn why webidl-conversions common-tags（yarn环境），查看这两个包的依赖来源，确认是否存在多版本共存的情况。
  • 在package.json中添加resolutions字段（npm需配合npm-force-resolutions工具，yarn直接支持），强制统一包版本：

    "resolutions": {
      "webidl-conversions": "^7.0.0",
      "common-tags": "^1.8.2"
    }
    

  • 重新执行npm install或yarn install安装依赖。

• 检查页面与插件配置

  • 确认目标Markdown页面的模板文件是否引入了依赖浏览器API（如window、document）的代码，这类代码在SSR构建阶段会触发错误。需用typeof window !== 'undefined'做环境判断，或使用loadable-components动态导入相关组件。
  • 暂时禁用gatsby-transformer-remark/gatsby-plugin-mdx的非必要自定义插件，逐步排查是否为插件冲突导致。

• 调整Webpack构建配置

  • 在gatsby-node.js中添加Webpack配置，在HTML构建阶段忽略有问题的包（临时规避方案）：

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

• 清理缓存后重新构建

  • 执行gatsby clean清除所有缓存文件，再运行gatsby build测试问题是否解决。

内容的提问来源于stack exchange，提问作者fullStackChris