fix(gatsby): fix fs empty webpack5 deprecation

[wardpeet]

Description

Documentation

Webpack has deprecated node.fs = "empty" into resolve.fallback.fs = false. We'll automatically patch it to the new syntax. This mostly leads to other issues during Module Resolving. By showing the breaking change message in Webpack, people know what to do.

The error now shows:

ERROR #98124  WEBPACK

Generating JavaScript bundles failed

Can't resolve 'path' in
'/home/ward/projects/stanford-ackel-gatsby-1613734568017/node_modules/vfile/node_modules/replace-ext'

If you're trying to use a package make sure that 'path' is installed. If you're trying to use a local file make sure
 that the path is correct.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

File: node_modules/vfile/node_modules/replace-ext/index.js:3:11

How to test?

Install react-markdown or documentation and test it.

[zslabs]

👋 Did this make it in the v3 release? I followed the instructions by adding what https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/#webpack-5-node-configuration-changed-nodefs-nodepath- recommended and still have an issue. Came across this locally:

 error  in ./node_modules/replace-ext/index.js
⠀
Module not found: Error: Can't resolve 'path' in
[1] '/Users/zach/Sites/site/node_modules/replace-ext'
[1]
[1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules
[1] by default.
[1] This is no longer the case. Verify if you need this module and configure a
[1] polyfill for it.
[1]
[1] If you want to include a polyfill, you need to:
[1] 	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify")
[1]  }'
[1] 	- install 'path-browserify'
[1] If you don't want to include a polyfill, you can use an empty module like this:
[1] 	resolve.fallback: { "path": false }
⠀
 error  in ./node_modules/unified/node_modules/vfile/core.js
⠀
Module not found: Error: Can't resolve 'path' in
[1] '/Users/zach/Sites/site/node_modules/unified/node_modules/vfile'
[1]
[1] BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules
[1] by default.
[1] This is no longer the case. Verify if you need this module and configure a
[1] polyfill for it.
[1]
[1] If you want to include a polyfill, you need to:
[1] 	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify")
[1]  }'
[1] 	- install 'path-browserify'
[1] If you don't want to include a polyfill, you can use an empty module like this:
[1] 	resolve.fallback: { "path": false }

[wardpeet]

Webpack isn't polyfilling by default anymore. You'll have to follow that breaking change.

Or what's your question?

[zslabs]

Hey @wardpeet thanks for replying. To clarify, after following the suggestion from the migration-guide, I'm seeing these errors - since it's pointing to path being an issue, is there something additional I should be doing within gatsby-node.js to solve these cases?

Not that I'd suspect they are connected, but also running into #29951 which makes debugging the site in general at the moment a bit challenging.

[wardpeet]

@zslabs want to hop on discord? (https://gatsby.dev/discord)
You should add resolve.fallback: { "path": false } to your webpackConfig, i'll update the migration guide to make this more clear.

#29951 Seems to be an issue with gatsby-plugin-netlify-cms