react-calendar-feed - Webpack v5 polyfills error when running gulp bundle

[mgienal]

Disclaimer

Yes

Sample

react-calendar-feed

Contributor(s)

@hugoabernier @petkir

What happened?

I'm trying to build this webpart (React Calendar Feed), but when I try to gulp bundle I run into the following webpack error regarding the automatic inclusion of polyfills (screenshot attached at the end of this message)

Starting subtask 'webpack'
Error - [webpack] 'dist':
[object Object]
[object Object]
[object Object]

Warning - [webpack] 'dist':
163:13-37: Module not found: Error: Can't resolve 'stream' in 'C:\Users\xxx\Desktop\SharePoint\sp-dev-fx-webparts\samples\react-calendar-feed\node_modules\sax\lib'
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: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }

I found other mentions of this (general) problem for other apps, e.g.

• v5 used to include polyfills for node.js core modules by default facebook/create-react-app#11756
• https://web3auth.io/docs/troubleshooting/webpack-issues
• https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

However, I was not succesful in applying the proposed solutions to this webpart. If this issue is known for the react-calendar-feed webpart, I would appreciate if someone could help me implementing the solution. Thank you.

Screenshot of error message:

Steps to reproduce

1. npm install
2. gulp build
3. gulp bundle --ship

Expected behavior

I expected gulp bundle --ship to run without an error message.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

v16.20.2

What version of Node.js is required by the sample?

v16/v14/v12

Paste the results of SPFx doctor

CLI for Microsoft 365 SharePoint Framework doctor
Verifying configuration of your system for working with the SharePoint Framework

✅ SharePoint Framework v1.15.0
✅ Node v16.20.2
✅ yo v4.3.1
✅ gulp-cli v2.3.0
✅ bundled typescript used

Additional environment details

No response