Gatsby站点部署Netlify时Webpack内置模块不兼容报错如何解决？

Gatsby 不会读取项目根目录下独立的 webpack.config.js 文件，所有 webpack 自定义配置必须通过 Gatsby 专属的 onCreateWebpackConfig Node API 注入，这是你之前所有配置未生效的核心遗漏点。

• 第一步：删除项目根目录下你自行创建的 webpack.config.js 文件，该文件不会被 Gatsby 加载。
• 第二步：在项目根目录找到（如不存在则新建）gatsby-node.js 文件，添加如下配置：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        assert: require.resolve("assert/"),
        crypto: require.resolve("crypto-browserify"),
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        os: require.resolve("os-browserify/browser"),
        stream: require.resolve("stream-browserify"),
      },
    },
  })
}

• 第三步：修改 package.json 配置，删除 browser 字段下的所有内容。你当前将 crypto、http 等模块设为 false，和添加 polyfill 的需求冲突，会导致配置优先级异常。
• 第四步：本地先执行 gatsby clean && gatsby build 验证构建流程正常，再推送到 Netlify 部署，避免本地缓存或远程构建缓存导致配置未生效。

你此前添加的 target: 'node14.17' 属于错误配置：Gatsby 构建包含服务端渲染和客户端打包两个阶段，客户端打包需要面向浏览器环境，设置 node 运行目标会导致浏览器端依赖加载异常，因此该配置直接删除即可。你已安装所有需要的 polyfill 依赖，上述配置完成后即可解决 node 模块找不到的报错。

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