Upgrading to React 17 and Webpack 5

Breaking Changes!!

In my last post I showed you how to create a React app from scratch with Webpack. Since then, these libraries have been updated with new features and interesting alternatives.

At least in Webpack…

This week was released a new version of React and I couldn't be more happy about it. As they mention in this blog post this new version does not contain any new features for us, the developers. Instead, they focused this release on features that enable gradual updates.

And, the release of Webpack 5 which has many new features.

The I'm more of a code type of person

The github repo

Upgrading Packages

First, lets update react and react dom:

yarn upgrade react@17.0.1 react-dom@17.0.1

Since React 17 we can use the new jsx transform, so we will need to upgrade our babel tools and install a new plugin:

yarn upgrade -D @babel/{core,preset-{env,react}}

yarn add -D @babel/plugin-transform-react-jsx

Next we will need to update our .babelrc file to look like this:

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

Starting from Babel 8, "automatic" will be the default runtime for the plugins.

Removing Unused React Imports

The new JSX transform automatically imports the necessary functions and React is no longer needed to be in the scope.

Inside our 'src/index.js' we can get rid of the import React statement:

import ReactDOM from 'react-dom'

const App = () => <div>Hello there!!</div>

ReactDOM.render(<App />, document.getElementById('root'))

And that's it, when you create a new React component you don't need to import React anymore.

Upgrading Webpack

Webpack 5 has many breaking changes, so we will need to upgrade our dependencies and our code.

Let's start by upgrading webpack itself and the cli tool:

yarn upgrade webpack{,-cli} --latest

Change the "start" script in your package.json file:

...
"start": "webpack serve --mode='development'"
...

That's it.

This is still a pretty much basic (but powerful) configuration, we will need to add more tools to create a full fledged React app.

Share this on Twitter

Comments

[Riya]

I am upgrading to React 18 and webpack5 and using storybook but keep running into errors related to storybook like

TypeError: cannot read properties of undefined (reading 'emit')
at handler (/node_moduled/@storybook/builder-webpack5/dist/index.js)

not able to find the resolution although tried a number of combinations for dependency versions

[Marian]

Nice, thanks for sharing!