Error: Resolve-Url-Loader : CSS error

#react #computerscience #webdev #vscode

The famous Resolve Url Loader, a weird issue that I ran into while trying to run a react project for the first time on my newly installed development environment. If you are curious about all these details, you may refer to this article to read about the circumstances in which I ran into this error.

Of course, such errors would push you to start thorough and deep research on the web to know about the why and when and more importantly, the HOW solve it. I already did that, and after trying most of the suggestions, although they worked for some developers, they didn't work in my case. The way I resolved this issue in my project was pretty unique, and that's why I chose to share it in my blog.

I am glad you are here and I hope you find this content useful. Without further ado, let's get to the solution!

since I was trying to run an existing project that I just clone from Github, I ran all the required commands such as :

Yarn install
Yarn upgrade
yarn add react-scripts
Yarn Build
Yarn start

Once I started the project this issue showed up every time, no matter what fixes I tried, so I went back to read the files line by line. Going through the Package.json file, I remarked that some of the packages weren't upgraded, specifically the react-scripts package. It's a set of scripts provided by the create-react-app starter pack, which enables launching React apps without much configuration. This capability comes in the form of multiple features, that include the auto prefixed CSS. And if you read the error details carefully, you will see that the issue is revealed on one of the CSS files. Of course, as part of the error investigation, I changed the CSS files links, I uninstalled, reinstalled, updated the node-sass and the resolve-URL-loader package, but to no avail.
To begin with, let's discover the CSS Autoprefixer , what's it, and what does it? and why is it stopping us from successfully building our newly created/cloned project?

What's CSS AutoPrefixer?

It is a CSS post-processor that parses the compiled CSS files checking it against caniuse service to manage the prefixes related to each vendor.

What's the Autoprefixer role?

It solves the problem we encounter with vendor prefixes that we have to apply to the CSS rules to make some options styles available for a larger variety of users on different browsers.
If that seems like a hard explanation, here it is short and clear: Autoprefixer is taking care of your CSS code, which prevents you from remeberance/add/remove/ check of vendor prefixes.

what's the issue with the Autoprefixer?

when starting a new React project, you will need to install a react-scripts package, which includes the resolve-URL-loader package, the latter role includes management and redirection of the CSS files. connecting the dots, we may understand that the management operation of the CSS files includes the auto prefixing service. Previous versions of the resolve-URL-loader package used to make use of the Rework CSS parser, but as it's not adapted to manage the modern CSS versions, the package of interest adopted the PostCSS parser by default. Long story short, the subject issue was the result of the bad configuration and management of CSS files caused by the Resolve-Url-Loader, itself included in the react-scripts package. Since my development environment was newly installed. I was using the latest version of yarn and upgrading all the packages, which caused the issue.

How I resolved the situation?

Reading the Package.Json file with a fine-tooth comb, I figured out that I was not using the same react-scripts that my team was using on the subject project. Uninstalling the existing react-scripts package and installing the right one served me well.

So here comes the end of my issues with the frontend project, that I built and start successfully. A sigh of satisfaction was about to rise from the bottom of my heart, but it didn't, because the Backend project developed using C#, which was running flawlessly, was launching a new message error, that took almost two days to find a fix, and the solution, was not more common than the one described in this article.

Thank you for reading so far, and if you are willing to learn about the next bug with the .Net project, just click on the next article.