本地执行Gatsby build失败：生成SSR bundle出错（Webpack相关）

本地执行gatsby build时无法生成SSR bundle，报错信息如下：

ERROR #98123  WEBPACK.BUILD-HTML

Generating SSR bundle failed

Reading from "node:events" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

File: node:events


 ERROR #98123  WEBPACK.BUILD-HTML

Generating SSR bundle failed

Reading from "node:stream" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

File: node:stream


 ERROR #98123  WEBPACK.BUILD-HTML

Generating SSR bundle failed

Reading from "node:util" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

File: node:util

当前配置信息 #

Gatsby 配置 (gatsby-config.js) #

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  flags: {
    DEV_SSR: true,
  },
  plugins: [
    {
      resolve: "gatsby-source-wordpress",
      options: {
        verbose: true,
        url: `https://*********/graphql`,
        schema: {
          queryDepth: 30,
          circularQueryLimit: 15,
          timeout: 60000,
          requestConcurrency: 150,
        },
        production: {
          allow404Images: true,
          allow401Images: true,
        },
      },
    },
    `gatsby-plugin-netlify`,
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    "gatsby-plugin-web-font-loader",
    "gatsby-transformer-sharp",
    "gatsby-plugin-postcss",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        icon: "src/images/favicon-32x32.png",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
    },
  ],
};

package.json 依赖 #

{
  "dependencies": {
    "@fontsource/lato": "^5.0.16",
    "@headlessui/react": "^1.7.17",
    "autoprefixer": "^10.4.16",
    "axios": "^1.5.1",
    "firebase": "^10.5.0",
    "formik": "^2.4.5",
    "framer-motion": "^10.16.4",
    "gatsby": "^5.12.4",
    "gatsby-plugin-image": "^3.12.1",
    "gatsby-plugin-manifest": "^5.12.1",
    "gatsby-plugin-matomo": "^0.16.2",
    "gatsby-plugin-netlify": "^5.1.1",
    "gatsby-plugin-postcss": "^6.12.0",
    "gatsby-plugin-sharp": "^5.12.1",
    "gatsby-plugin-sitemap": "^6.12.1",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-source-filesystem": "^5.12.0",
    "gatsby-source-wordpress": "^7.12.1",
    "gatsby-transformer-sharp": "^5.12.1",
    "lodash": "^4.17.21",
    "postcss": "^8.4.31",
    "react": "^18.2.0",
    "react-animations": "^1.0.0",
    "react-cookie-consent": "^9.0.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-responsive-carousel": "^3.2.23",
    "swiper": "^10.3.1",
    "tailwindcss": "^3.3.3",
    "yup": "^1.3.2"
  }
}

解决方案 #

1. 自定义Webpack配置处理node:协议 #

在gatsby-config.js中添加Webpack解析规则，自动移除node:前缀，让Webpack识别对应的Node.js原生模块：

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  flags: {
    DEV_SSR: true,
  },
  plugins: [/* 保留原插件列表 */],
  // 新增Webpack配置
  onCreateWebpackConfig: ({ actions, getConfig }) => {
    const config = getConfig();
    config.resolve.plugins.push({
      apply: (resolver) => {
        resolver.getHook("resolve").tap("NodeProtocolFix", (request) => {
          if (request.request?.startsWith("node:")) {
            return { ...request, request: request.request.slice(5) };
          }
          return request;
        });
      },
    });
    actions.replaceWebpackConfig(config);
  },
};

2. 排查并调整问题依赖 #

• 重点检查firebase@10.5.0：Firebase v10+版本引入了node:协议的导入方式，若上述配置无效，可尝试降级到Firebase v9.x版本
• 升级gatsby-source-wordpress到最新稳定版，确认是否修复了依赖链中的兼容问题

3. 清理缓存后重试 #

修改配置或依赖后，清理Gatsby缓存再执行构建：

gatsby clean && gatsby build

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