loading...

Upgrading to React 17 and Webpack 5

markhker profile image Mark Hkr 😎 Originally published at marlom.dev ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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}}
Enter fullscreen mode Exit fullscreen mode
yarn add -D @babel/plugin-transform-react-jsx
Enter fullscreen mode Exit fullscreen mode

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

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

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'))
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

...
"start": "webpack serve --mode='development'"
...
Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide
Collapse
isarisariver profile image
Marian Beck

Nice, thanks for sharing!