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

[Adam-it]

🎯Aim

The aim of this issue is to upgrade the RSS Reader 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

[reshmee011]

I can work on this one:).

[Adam-it]

I can work on this one:).

All yours.
Please do double check if the we part 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 🤩👏👏👏

[reshmee011]

@Adam-it : I am stuck with a weird dependencies/environment version upgrade issue. Assign it to @a1mery who is willing to take it forward and I will try to learn from it.

[Adam-it]

@Adam-it : I am stuck with a weird dependencies/environment version upgrade issue. Assign it to @a1mery who is willing to take it forward and I will try to learn from it.

Roger that

[Adam-it]

@reshmee011, @a1mery 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

[reshmee011]

@Adam-it : I have reached a dead-end, not sure what else to try to make it work. @a1mery is facing some challenges with the upgrade as well. Let's hope we find a way.

I have written a post about my challenges https://reshmeeauckloo.com/posts/spfx-upgrade-to-latest-version/ , it's my lack of knowledge of front end programming , gulp, node and webpack, I am unable to progress.

[Adam-it]

@Adam-it : I have reached a dead-end, not sure what else to try to make it work. @a1mery is facing some challenges with the upgrade as well. Let's hope we find a way.

I have written a post about my challenges https://reshmeeauckloo.com/posts/spfx-upgrade-to-latest-version/ , it's my lack of knowledge of front end programming , gulp, node and webpack, I am unable to progress.

Yes I saw that blog post 👍. TBH I would need to have a deep dive on this myself before I could be able to advise anything.
There is no pressure 👍 we may complete it later on

[reshmee011]

@Adam-it : Thanks so much for your understanding. I need a break to be inspired to get back to it. It would have ideal to do it as part of Hacktoberfest. There is some dependency version issue with the upgrade and can't figure it out with no obvious error messages. The gulp file has been modified to make it work with the older version, I am guessing the gulp file needs further updates. No rush, you got a lot on your plate.

[a1mery]

@Adam-it @reshmee011 I apologize for the late update.
As Reshmee said there are custom webpack configurations. So when switching to Webpack 5 (from SPFx 1.19) it stops working :(
I've tried making some updates follwing this: official Webpack documentation but no luck for now..

[Adam-it]

@Adam-it @reshmee011 I apologize for the late update.
As Reshmee said there are custom webpack configurations. So when switching to Webpack 5 (from SPFx 1.19) it stops working :(
I've tried making some updates follwing this: official Webpack documentation but no luck for now..

No problem, thanks for the update 👍.

[ferrarirosso]

@Adam-it let me know if i can help with this one, looks like a good challenge

[reshmee011]

@ferrarirosso : I am happy for you to dive into it.

[Adam-it]

@Adam-it let me know if i can help with this one, looks like a good challenge

I guess it's for @reshmee011 and @a1mery to decide. I just do 'house cleaning' 🧹 here 😅

[reshmee011]

@a1mery : can @ferrarirosso take over the upgrade?

[a1mery]

Yes, sure!
Good luck @ferrarirosso ;)

[ferrarirosso]

@reshmee011 @a1mery

• I had to remove the handlebar-helpers package which was last updated 7 years ago and I did replace most of the helpers with lodash or js native.
• Did also some changes in Gulp for Webpack 5 compatiblity with new npm packages
• Fixed a bug with custom template which caused the webpart tab to freeze (render loop), so I suppose custom template were not so intensively used.

Happy to help

[reshmee011]

@ferrarirosso : That's awesome, I would have never thought of those changes. Thanks for sharing your findings and workarounds.

[a1mery]

Congrats @ferrarirosso!! You're the best!
I actually had nightmare about that handlebar-helpers package :(

[ferrarirosso]

@a1mery that was also a nightmare for me until I decided to rewrite part of the code, a good experience

[reshmee011]

@ferrarirosso : you are a total star, I will look at your changes into more details to learn from it. Making changes to gulp , webpack and finding alternative packages to the handlebars is beyond me, I am guessing a sound foundation in front end development is needed. @a1mery :thanks for helping too.

[ferrarirosso]

@reshmee011 thank you for your kind words
Community rocks !

[Adam-it]

@ferrarirosso, @a1mery, @reshmee011 Awesome Team Work 🤩
You all Rock 👏👏👏👏👏👏