Solve The Error “Source map error: Error request Failed with Status 404”

JavaScript is a wonderful programming language programmers and developers are working on. It is a frequently used language for building interactive designs. It is not at all a complex language for programmers, even though there are many elements on the websites that are designed with JavaScript. Even beginners are learning it as it is the base of the programming. JavaScript updates come up some time as well as new libraries and frameworks are being introduced with new features and better coding options. Barba.js is a dependency-free, flexible, small, and easy-to-use JavaScript library that can create smooth and fluid transitions between web pages. It allows you to improve user experience by reducing delays and minimizing http requests. When working with it, you may encounter “Source map error: Error request Failed with Status 404”.

Ending up with an error message halts the programming till you find the answer to remove it and proceed with the code. As you are here to get tips and solutions to get rid of the error, we leave no stone unturned to help you. Let’s check out how the error shows up

How do you get the error?

When you try to install Barba.Js along with the JS bundler for a website hosted by GitHub. A line to install Barba.JS you may have used CDN, but as soon as you open the website, it throws the map source error. Have a look at the error earning you see

Source map error: Error: request failed with status 404 Resource URL: https://cdn.jsdelivr.net/npm/@barba/[email protected] Source Map URL: barba.umd.js.map

This is the error you get when trying the below script

<script src="https://cdn.jsdelivr.net/npm/@barba/[email protected]"></script>

How To Fix the Error “Source map error: Error request Failed with Status 404”

We have simple solutions to handle the exception. Have a look at the solutions

Solution 1 – Adding in the script

In most cases, the solution is really simple. This solution is the same as you just need to add a line in your code that can resolve the error. Look at the following code

<script type="javascript" src="https://cdn.jsdelivr.net/npm/@barba/[email protected]"></script>

Adding type=”javascript” may remove the error warning.

Solution 2 – Apply the following

To get rid of the error message, you just need to follow this:

Source map files, like bootstrap.min.css.map, are generated automatically during files minification/compiling process. They actually are not needed for the production, but at the same time occupy 3 times more disk space than ones which they are mapping.
If you want just to remove that message, you can either remove comments like /*# sourceMappingURL=bootstrap.min.css.map */ in bootstrap.min.css, bootstrap.min.js, popper.min.js or any other ccs file in which you are getting error.

Solution 3 – Use the below code

Another solution to solve the error is to follow the below

Delete /*# sourceMappingURL=bootstrap.min.css.map */ in css/bootstrap.min.css
and delete /*# sourceMappingURL=bootstrap.css.map */ in css/bootstrap.css

Conclusion

We shed light on the solutions to fix the error “Source map error: Error request Failed with Status 404”. You can choose the way that suits your project’s current condition.

I hope you solve the error! Happy Coding!