Upgrading to React 17 and Webpack 5
How I upgraded my project to React 17 and Webpack 5
I have been working with React for several years now. So far, after each release, it always excited to try out new features. But this wasn’t the case with React 17. It was advertised as a No New Feature release.
I was a bit disappointed initially but anyway went ahead with upgrading to React 17 and to Webpack 5.
Later, I noticed several enhancements under the hood with React 17, which I strongly recommend updating.
This article will discuss the steps to upgrading a React project to React 17 and Webpack 5 with my own set of tips to avoid common pitfalls.
Why Should You Upgrade?
Generally, as developers, we think twice before upgrading a project to the latest versions because there could be breaking changes, dependency issues, depreciation warnings, etc. Therefore, let’s get a basic understanding of the impact of upgrading to React 17 and Webpack 5.
React 17
Although there are no significant features in this version, it sets the foundation for gradual React upgrades for the future.
Therefore, when you upgrade from React 16 to 17, you must upgrade the whole project at once.
However, from React 17 onwards, there will be two upgrade options. Hereafter, you can decide to upgrade the entire project at once or in parts to the latest version. Most importantly, you don’t need to worry about breaking changes.
Gradual updates or quite simply, being able to use more than a single version of React components in the same web app, is now more important than ever. React components are often shared from React projects to Bit, to be reused on other projects. Being able to use components of different React versions could make a lot of difference — especially if these “components” are full-pages or widgets that make up an independent micro-frontend.
