Upgrade Calendar web part to latest version of SPFx - Refresh Rangers Hacktoberfest Event

[Adam-it]

🎯Aim

The aim of this issue is to upgrade the Calendar web part sample to the latest version of SPFx (1.20)

🤔 Tips how to get started

To support you in this issue you may use the below tooling:

• CLI for Microsoft 365 has a command that will generate upgrade guidance for this SPFx project m365 spfx project upgrade
• SPFx Toolkit VS Code extension has an Upgrade Project action which generates an .md report with upgrade guidance to the latest supported SPFx version

📣 What's this event all about

Refresh Rangers is a unique Hacktoberfest event aiming to update our most popular samples 🚀.
During this, you may obtain a unique Microsoft 365 & Power Platform Community badge - Refresh Rangers 🎖️
To obtain this badge besides opening a PR you also need to opt-in the Microsoft 365 & Power Platform Community Recognition Program and fill out this form

[petkir]

@Adam-it pay attention PR is open for react-calendar
Upgraded react-calendar to SPFx 1.16.1 #5270

@mohammadamer do you like to update it directly to 1.20 🩵 ?

greets Peter

[mohammadamer]

I like to upgrade it to 1.20.0 but unfortunately, the webpart is huge and the dependency is complex. it's not easy to do it directly.
Maybe upgrade it from 1.16.1 to 1.20.0 would be easier.

[Adam-it]

hi, sorry for the late reply.
IMO it's always better to upgrade to latest but since upgrade to 1.16.1 is already done lets first merge this PR and then try to take on the upgrade to SPFx 1.20

[mohammadamer]

Hey @Adam-it
I wanna challenge myself :)
Could you assign it to me?

[Adam-it]

Hey @Adam-it
I wanna challenge myself :)
Could you assign it to me?

All Yours 👍
Please do double check if the project still works after upgrading to latest version of SPFx.
To get a badge from Microsoft 365 & Power Platform community you need to join the recognition program: https://pnp.github.io/recognitionprogram/
You only need to do that one time so if you done already in the past you don't need to fill the form again.

To get a badge from the Hacktoberfest organizers you need to register to Hacktoberfest event: https://hacktoberfest.com/participation/

You Rock 🤩👏👏👏

[Adam-it]

@mohammadamer what is the status on this one?
The event is ending with October and this will mean that this won't count toward the Hacktoberfest event if you participated in this one (here there is nothing we may do about it)
BUT a PR for this issue will be created even after October this will still count to get the Refresh Ranger badge from the Microsoft 365 and Power Platform Community

[mohammadamer]

@Adam-it
I'm currently working on it and encountering some dependency problems. I'm working to resolve these and will submit a pull request as soon as possible.

[Adam-it]

@Adam-it
I'm currently working on it and encountering some dependency problems. I'm working to resolve these and will submit a pull request as soon as possible.

No pressure, just wanted to align. Let me know if you need any help

[mohammadamer]

@Adam-it
I've completed all the necessary upgrade steps but encountered an error during the solution testing. I'm troubleshooting and the issue persists. I'm actively working on it and aim to have it resolved by the end of the day.

Error in the terminal:

[17:25:37] Error - [webpack] 'dist':
./node_modules/xml2js/lib/parser.js:17:17-47: Module not found: Error: Can't resolve 'timers' in 'C:\sp-dev-fx-webparts\samples\react-calendar\node_modules\xml2js\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: { "timers": require.resolve("timers-browserify") }'
        - install 'timers-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "timers": false }

[17:25:37] Warning - [webpack] 'dist':
./node_modules/sax/lib/sax.js:169:13-37: Module not found: Error: Can't resolve 'stream' in 'C:\react-calendar\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 }

The this error in the developer tools:

hook.js:608 Could not load calendar-web-part in require. Error: Cannot find module 'timers'
    at webpackMissingModule (parser.js:17:18)
    at Object.<anonymous> (parser.js:17:18)
    at 19531 (parser.js:385:2)
    at __webpack_require__ (bootstrap:19:1)
    at Object.<anonymous> (xml2js.js:12:12)
    at 10911 (xml2js.js:39:2)
    at __webpack_require__ (bootstrap:19:1)
    at 79870 (IPanelModeEnum.ts:5:2)
    at __webpack_require__ (bootstrap:19:1)
    at 52915 (dateUtils.ts:9:2)

[Adam-it]

@mohammadamer thanks for the update.
Please be aware there is no pressure regarding the Refresh Ranger badge and you may still receive it after October. It's only Hacktoberfest event we have no control

[mohammadamer]

@Adam-it
I did it :)
I upgraded the SPFx version and fixed an issue related to xml2js NPM package.