Upgrading the ST6 Meme Generator to Create React App 3.0

This is the second post in the ST6 meme generator series. You can read the introductory post here.

You probably know the saying "If it ain’t broke, don’t fix it" but that's not true for JavaScript projects. You should always keep them up-to-date. The ecosystem is moving so fast that being away for a week could result in hundred of dependencies to update.

A couple of weeks ago the Create React App maintainers released version 3.0 of this great tooling so we decided to upgrade the meme generator. Hooks support is now baked into Create React App so we needed no further reason.

One does not simply upgrade a JavaScript project

Upgrading to Create React App 3.0 is as simple as bootstrapping a new project with it (assuming you did not go wild and ejected the app). Executing:

yarn add --exact react-scripts@3.0.0

...and that's it. Almost.

Unfortunately it is rarely that easy in JavaScript projects. Running the app locally resulted in this strange and obscure error:

Indeed one of the changes in Create React App was related to Browserslist but nothing to do with this mythical browser named kaios.

Diving deeper into the issue it turned out that Browserslist is using Can I Use ... ? support tables under the hood which recently added support for a new browser: the one bundled in KaiOS - the spiritual successor of Firefox OS.

Upgrading the app resulted in two versions of Browserslist, each using a different version of the "Can I Use" database. One of the database versions supports KaiOS, the other - doesn't. With yarn's philosophy to not upgrade locked sub-dependencies, we get the KaiOS error.

The solution is quite simple. We just need to yarn like never before:

$ rm yarn.lock
$ yarn

This ensures that yarn uses the latest matching versions of all sub-dependencies and magically we have a working app.

Upgrading the configuration setup for Create React App 3.0

Setting the initial troubles aside, Browserslist config is now used for controlling the output of our JavaScript files. This means that we can use separate configurations for development and production ultimately resulting in quicker compile times locally. Here is the recommended configuration that we are using:

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

This configuration ensures that our app works correctly on all relevant browsers in production, but locally in development it targets just the latest versions of Chrome, Firefox and Safari. A nice tweak especially if you develop on MacOS.

The other big thing in Create React App is the built-in support for React Hooks. This comes in the form of bundling the react-hooks ESLint plugin. If you remember from our last post we have already used the plugin so it will be better if we remove it from our configuration/dependencies and let Create React App manage it.

...
"devDependencies": {
    ...
-    "eslint-plugin-react": "7.12.4",
-    "eslint-plugin-react-hooks": "1.6.0",
    ...
},
...
"eslintConfig": {
  ...
-   "plugins": [
-     "react-hooks"
-   ],
-   "rules": {
-     "react-hooks/rules-of-hooks": "error",
-     "react-hooks/exhaustive-deps": "error"
-   }
  ...
}

Crafting a great pull request description

You can judge great developers by the pull request descriptions they are writing. Are they walking the last mile when the code is "ready" to craft a great description of the applied changes?

A great pull request description is one that the reviewer would love to read. It's like an interesting book for a reader who is curious to read it and learn something new.

Upgrading dependencies might not be the most interesting thing to read about in a pull request description but we can change that. To improve the reading (and learning) experience we can link to the changelog for the specific version of each updated package. Thus everyone reviewing the pull request can educate themselves what exactly has been changed in each dependency.

We can use a Markdown table format in order to present those in a more digestible form. Here's how it's going to look in our case:

When adding the links to the changelogs, make sure that you are linking to the correct heading and anchor for the respective version. You might even have to link to the changelog in a specific commit because some changelogs contain information just for the latest version. For such changelogs, when a newer version is released, your links become obsolete. This, for example, is the case with Create React App.

You can check out the final pull request in the Meme repo. It includes other goodies like adding linting for Markdown files and improving Jest coding experience by installing its types declarations.