search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.19k stars 10.33k forks source link

ERROR #98123 WEBPACK: Generating SSR bundle failed #38648

Open nclzz opened 10 months ago

nclzz commented 10 months ago

Preliminary Checks

Description

Hello, I have a Gatsby project that when I import the library @datocms/cma-client-browser, it gives the following error during the build phase (gatsby build). The original project is complex, but I was able to reproduce the error in the linked repo.

The error occurs both locally and on Netlify. By removing import { buildClient } from "@datocms/cma-client-browser"; from the index.js file, the build completes successfully. Would you be able to help me understand the issue? Unfortunately, the error doesn't provide much information. It might be related to Gatsby's webpack settings, but all the workarounds I've tried haven't solved the issue.

Reproduction Link

https://github.com/MultiDigital/datocms-ssr

Steps to Reproduce

  1. yarn
  2. gastby build

Expected Result

Build completed succesfully

Actual Result

ERROR #98123 WEBPACK

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

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

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

Environment

System:
    OS: macOS 13.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.5.0 - ~/.nvm/versions/node/v19.5.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v19.5.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.33
    Firefox: 117.0
    Safari: 16.2

Config Flags

No response

wrekah commented 9 months ago

Is there any workaround?

jmmrte commented 9 months ago

Same error here.

jmmrte commented 9 months ago

I was able to work around this with the following webpack config, added to gatsby-node.ts (TypeScript Gatsby project):

import { CreateWebpackConfigArgs } from 'gatsby';
import webpack from 'webpack';

export const onCreateWebpackConfig = ({ actions, plugins, ...args }: CreateWebpackConfigArgs) => {
  const buildWebpackConfig =
    args.stage === 'build-html'
      ? {
          resolve: {
            // Handle Uncaught TypeError: util.inherits is not a function - https://github.com/webpack/webpack/issues/1019
            mainFields: ['browser', 'module', 'main'],
            // Handle unsupported node scheme - https://github.com/webpack/webpack/issues/13290#issuecomment-987880453
            fallback: {
              util: require.resolve('util'),
              stream: require.resolve('stream-browserify'),
            },
          },
        }
      : {};
  actions.setWebpackConfig({
    plugins: [
      // Handle unsupported node scheme - https://github.com/webpack/webpack/issues/13290#issuecomment-987880453
      new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
        resource.request = resource.request.replace(/^node:/, '');
      }),
    ],
    ...buildWebpackConfig,
  });
};

What this does is configures mainFields (not entirely sure how this works yet) and fallback polyfills for building only, and adds the webpack.NormalModuleReplacementPlugin plugin to remove the use of any node: URI schemes. I cobbled this solution together after reading through multiple threads, and at least the project deploys now.

For this to work, I needed to install util and stream-browserify packages, like so:

npm i --save-dev util && npm i --save stream-browserify

After those configurations, I was finally able to build the project.

Hope that gets anyone else with this issue on the right path!

jmmrte commented 9 months ago

The error I resolved with this workaround was:

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.
error 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.
error 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.
not finished Building HTML renderer - 5.564s

The first thing I tried was adding the NormalModuleReplacementPlugin webpack plugin in gatsby-node in order to replace node: URIs. Start there if you're just stumbling on this thread with similar issues.

import webpack from 'webpack';

export const onCreateWebpackConfig = ({ actions, plugins }) => {
  actions.setWebpackConfig({
    plugins: [
      // Handle unsupported node scheme - https://github.com/webpack/webpack/issues/13290#issuecomment-987880453
      new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => {
        resource.request = resource.request.replace(/^node:/, '');
      }),
    ],
  });
};

If you still get errors, look at my previous response for additional workarounds I needed to use. Hope this helps.

mafiusu commented 9 months ago

EDIT: module: { rules: [{ test: /form-data/, use: loaders.null() }], },

helped me for a successful build

@jmmrte thank you for the workaround. But somehow it leads to a new error on my project listing:

failed Building static HTML for pages - 1.753s

ERROR #95312 HTML.COMPILATION

"window" is not available during server-side rendering. Enable "DEV_SSR" to debug this during "gatsby develop".

See our docs page for more info on this error: https://gatsby.dev/debug-html

1 | / eslint-env browser /

2 | module.exports = typeof self == 'object' ? self.FormData : window.FormData; | ^ 3 |

WebpackError: ReferenceError: window is not defined

Do you have a guess as to why this might be? I access window object as mentioned from the Gatsby docs by checking it before always. It has worked before.

karimGhost commented 9 months ago

@mafiusu ... window is not available During the build process , i also had the same issue i did this and it worked ... module.exports = typeof window !== 'undefined' && self === 'object' ? self.FormData : window.FormData;

karimGhost commented 9 months ago

] this worked For me if you

exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ plugins: [ new webpack.NormalModuleReplacementPlugin(/^node:/, (resource) => { resource.request = resource.request.replace(/^node:/, ''); }), ], resolve: { fallback: { "stream": require.resolve("stream-browserify"), // Use stream-browserify as a polyfill "emitter": require.resolve("emitter"), }, }, }); };



if you are using  webpack.config.js file, update it with the following:

const path = require("path");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        "stream": require.resolve("stream-browserify"),
      },
    },
  });
};
justinh00k commented 8 months ago

Above solutions don't work for me. void[0] is not a function, etc. Have been stuck for a while now. Any updates?

chitoku-k commented 6 months ago

Hi,

I have fixed this with #38516, which was published as gatsby@5.13.2. Hope this helps!