DEV Community

Mark Hkr 😎
Mark Hkr 😎

Posted on • Originally published at marlom.dev

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
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

Top comments (2)

Collapse
 
rturkar profile image
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

Collapse
 
isarisariver profile image
Marian

Nice, thanks for sharing!