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
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.
Top comments (2)
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
Nice, thanks for sharing!