My experience migrating a React App from Create-React-App 4 to 5
Tags: cra, react, porgramming
Published: 2022-01-02 16:25:10

---
title: My experience migrating a React App from Create-React-App 4 to 5
published: true
date: 2022-01-02 15:24:41 UTC
tags: cra,react,porgramming
canonical_url: https://relatablecode.com/migrating-a-react-app-from-create-react-app-4-to-5/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhgp59fhgrxynxg94zej.png
---

![React photo](https://cdn-images-1.medium.com/max/1024/1*kci3fAxsO-1c9zmkB1tZJw.jpeg)
_Photo by Lautaro Andreani on Unsplash_

Recently the team behind [Create-React-App](https://create-react-app.dev/) updated the package from version 4 to 5. You can see a full list of changes right [here](https://github.com/facebook/create-react-app/releases). This fixed a lot of outdated dependencies, gave support to Tailwind, updated Webpack, and a bunch of other changes. This article addresses how I went about the process and all the small little problems I ran into along the way.

### Updating

In order to update the version from 4 to 5 run the following command:

![Yarn command to update react-scripts](https://cdn-images-1.medium.com/max/908/0*oRTBT5dOV95RCO4D)

Upon starting up the dev environment for my app I noticed that the compile-time reduced considerably, which was a welcome change! But I also received several warnings and errors after updating and starting up the app.

### Warning

My first warning was about the source maps for third party libraries that don’t actually exist:

> Failed to parse source map from ...\node\_modules\html-to-image\src\applyStyleWithOptions.ts' file: Error: ENOENT: no such file or directory

For the time being, I’m not aware of a way to avoid this with a setting so to omit the warnings in the terminal I decided to no longer output the source maps, specifically for the dev environment.

In the root folder I created the following file: .env.development and added the following line:

```
GENERATE_SOURCEMAP=FALSE
```

The development suffix is important because I needed the source maps in production because of some third-party libraries.

### Errors

I received two major errors after the update, the first one was related to CSS-In-Modules in combination with SASS:

> Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.  
Invalid dependencies may lead to broken watching and caching.

Luckily enough in the error message itself the file that was being affected was referenced, for example:

![Sass error](https://cdn-images-1.medium.com/max/1024/0*W_bA7cKuuKIGeI9a)

This one was fairly simple to solve as the error message itself indicated the solution, just have to change the relative path to an absolute path. So this:

```
@use 'styles/mixins'; 
@import 'styles/variables';
```

changed to this:

```
@use 'src/styles/mixins'; 
@import 'src/styles/variables';
```

My final error was:

> ERROR in Failed to load config "react" to extend from.  
Referenced from: \*/.eslintrc.json

This error is in reference to ESLint, from what I could gather their internal ESLint was running into a conflict with my personal configurations, to circumvent this I changed up the dependencies in the .eslintrc.json file.

I use a variety of extensions but I left it as follows, removing “react” and adding in “react-app”

```
"extends": [ 
    "react-app", 
    ...Other dependencies 
]
```

And that’s it! Let me know what you think of Create-React-App 5 if you use it or if you run into any other issues.

{% embed https://www.youtube.com/watch?v=3Kf8lNagZ-Y&feature=youtu.be  %}

More content at [Relatable Code](https://relatablecode.com)

If you liked this feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/diego-ballesteros-9468a7136/) or [Twitter](https://twitter.com/relatablecoder)

_Originally published at_ [_https://relatablecode.com_](https://relatablecode.com/migrating-a-react-app-from-create-react-app-4-to-5/) _on January 2, 2022._