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

[github-actions]

This issue has been marked as stale due to no progress in over 90 days. If you are still experiencing this issue, please provide additional information so we can help you resolve it.

[github-actions]

Closing this issue due to lack of activity. If you are still encountering this issue, please do not hesitate to open a new issue. Make sure to follow the guidance on how to create good issues to increase your chances of getting the help you deserve.