Problems after upgrade to Gatsby v3 (Webpack 5 and DEV_SSR)

[nibtime]

I just upgraded to Gatsby v3 in a project. I also upgraded all plugins to their next major version.

Just two things made problems. I managed to get rid of 1, but have no clue how to get rid of 2.

Does anybody have an idea what's the reason for 2? The same setup worked with DEV_SSR active and gatsby@^2.32.0 just before I upgraded. If I disable DEV_SSR, everything works fine.

1. Missing polyfill with Webpack 5

Uncaught ReferenceError: process is not defined
    at eval (index.js:8)
    at Object.../../node_modules/chalk/index.js (commons.js:371)
    at Object.options.factory (commons.js:9086)
    at __webpack_require__ (commons.js:8499)
    at fn (commons.js:8773)
    at eval (index.js:14)
    at Object.../../node_modules/parser-ts/node_modules/@babel/highlight/lib/index.js (commons.js:3638)
    at Object.options.factory (commons.js:9086)
    at __webpack_require__ (commons.js:8499)
    at fn (commons.js:8773)

Some parser combinator lib I use seems to need a polyfill for process, which apparently is not added with Webpack 5 anymore. I solved this by using the node-polyfill-webpack-plugin for convenience until I understand that part better.

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig()
  config.plugins = [new NodePolyfillPlugin(), ...config.plugins]
  actions.replaceWebpackConfig(config)
}

2. Development server crash when navigating to home page with DEV_SSR active

Couldn't read the file /workspaces/site-zentrum/packages/site-zentrum-gatsby, possibly due to source maps failing
original error Error: ENOENT: no such file or directory, open '//public/webpack.stats.json'
    at Object.openSync (fs.js:462:3)
    at Object.fs [as readFileSync] (fs.js:364:35)
    at /workspaces/site-zentrum/packages/site-zentrum-gatsby/public/webpack:/@iacm-med/site-zentrum-gatsby/.cache/ssr-develop-static-entry.js:24:3
    at /workspaces/site-zentrum/packages/site-zentrum-gatsby/public/render-page.js:24497:3
    at Object.<anonymous> (/workspaces/site-zentrum/packages/site-zentrum-gatsby/public/render-page.js:24502:12)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '//public/webpack.stats.json'
Failed to validate error Error [ValidationError]: child "filePath" fails because ["filePath"
is not allowed to be empty]
    at Object.exports.process
(/workspaces/site-zentrum/node_modules/@hapi/joi/lib/errors.js:202:19)
    at internals.Object._validateWithOptions
(/workspaces/site-zentrum/node_modules/@hapi/joi/lib/types/any/index.js:763:31)
    at internals.Object.validate
(/workspaces/site-zentrum/node_modules/@hapi/joi/lib/types/any/index.js:797:21)
    at constructError (/workspaces/site-zentrum/node_modules/gatsby-cli/lib/structured-errors/
construct-error.js:52:32)
    at Reporter.error
(/workspaces/site-zentrum/node_modules/gatsby-cli/lib/reporter/reporter.js:135:59)
    at
/workspaces/site-zentrum/node_modules/gatsby/src/utils/dev-ssr/develop-html-route.ts:42:14
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  isJoi: true,
  details: [
    {
      message: '"filePath" is not allowed to be empty',
      path: [Array],
      type: 'any.empty',
      context: [Object]
    }
  ],
  _object: {
    context: { path: '/', filePath: '', line: undefined, column: undefined },
    filePath: '',
    location: { start: [Object] },
    text: 'The path "/" errored during SSR.\n' +
      '\n' +
      '    Edit its component  to resolve the error.',
    level: 'WARNING',
    docsUrl: 'https://gatsby.dev/debug-html',
    stack: [],
    code: '11614'
  },
  annotate: [Function]
}

[LekoArts]

Hi!

1. Sounds like the removed polyfills from webpack, right? We have a short section on this here: https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#webpack-5-node-configuration-changed-nodefs-nodepath-

Might be worth adding your case to it? :)

2. As DEV_SSR is still experimental we're tracking questions & bug reports in a single place, so would appreciate it if you can copy your bug report over to there: SSR in Develop #28138
   Thanks!

P.S.: Thanks for helping people out here in the discussions with their questions! 💜

[nibtime]

Thanks for your answer @LekoArts!

regarding 1: the migration docs already pointed me in the right direction, but I still had to figure out how to actually polyfill it. Maybe updating the docs with a comprehensive list of polyfills like here or with the snippet from above that uses node-polyfill-webpack-plugin? I understand that this is actually not a Gatsby issue, but nonetheless, it's an obstacle when migrating to v3.

regarding 2: I will file a separate bug report in #28138