How to fix the "DevTools failed to load SourceMap: Could not load content" error when adding a JavaScript library?
Google Chrome-DevtoolsSource MapsGoogle Chrome-Devtools Problem Overview
My code
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src='./pose/images/aa_085.jpg'/>
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose){
console.log(pose);
})
</script>
</html>
I rarely use HTML and JavaScript and almost forget the most fundamentals. What is the error?
Error information
> DevTools failed to load SourceMap: Could not load content for https://cdn.jsdelivr.net/npm/@tensorflow/tf.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Google Chrome-Devtools Solutions
Solution 1 - Google Chrome-Devtools
This worked for me:
Go to Inspect → Settings (Symbol) gear → Uncheck Enable JavaScript source maps and Enable CSS source map.
Refresh.
(Note: Deactivate Adblock if the above process did not work.)
Solution 2 - Google Chrome-Devtools
Newer files on JsDelivr get the sourcemap added automatically to the end of them. This is fine and doesn't throw any SourceMap-related notice in the console as long as you load the files from JsDelivr.
The problem occurs only when you copy and then load these files from your own server. In order to fix this for locally loaded files, simply remove the last line in the JavaScript file(s) downloaded from JsDelivr.
It should look something like this:
//# sourceMappingURL=/sm/64bec5fd901c75766b1ade899155ce5e1c28413a4707f0120043b96f4a3d8f80.map
As you can see, it's commented out, but Chrome still parses it.
Solution 3 - Google Chrome-Devtools
This is what worked for me:
Instead of
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
try
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
After that change I am not seeing the error any more.
Solution 4 - Google Chrome-Devtools
Also I'd faced the same kind of problem for Telerik's Kendo UI JavaScript file. For that you need to uncheck options 'Enable JavaScript source maps' and 'Enable CSS source map' from the Inspect element as shown in image and refresh the web page.
Solution 5 - Google Chrome-Devtools
When it’s annoying with warnings like
DevTools failed to load SourceMap: Could not load content for http://********/bootstrap/4.5.0/css/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
follow this path and remove that tricky
/*# sourceMappingURL=bootstrap.min.css.map */ line in file bootstrap.min.css.
Solution 6 - Google Chrome-Devtools
In my case, I had to deactivate Adblock and it worked fine.
Solution 7 - Google Chrome-Devtools
I had a similar problem when I was trying to work with coco-ssd. I think this problem is caused by the version. I changed the version of tfjs to 0.9.0 and coco-ssd version to 1.1.0 and it worked for me. (You can search for posenet versions on https://www.jsdelivr.com/package/npm/@tensorflow-models/posenet.)
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"></script>
<!-- Load the coco-ssd model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"</script>
Solution 8 - Google Chrome-Devtools
In my case I had to remove React Dev Tools from Chrome to stop seeing the strange errors during development of React application using a local Express.js server with a Create React App client (which uses Webpack).
In the interest of community, I did a sanity check and quit everything - server/client server/Chrome - and then I opened Chrome and reinstalled React Dev Tools... I started things back up and am seeing this funky address and error again:
Solution 9 - Google Chrome-Devtools
While the fix as per Valeri works, it’s only for tfjs.
If you're expecting for body-pix or any other tensor-flow/models, you would be facing the same. It is an open issue too and the team is working on the fix!
But, if you don't have problem in degrading the version (if anyone wants to use body-pix) from the latest documentation, both the below links works fine as I've tested the same:
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"></script>
Solution 10 - Google Chrome-Devtools
Try to see if it works in Incognito Mode. If it does, then it's a bug in recent Chrome. On my computer the following fix worked:
- Quit Chrome
- Delete your full Chrome cache folder
- Restart Chrome
Solution 11 - Google Chrome-Devtools
In my case, some broken URL was found in a layout.
Solution 12 - Google Chrome-Devtools
I get this warning in Angular if I run:
ng serve --sourceMap=false
To fix:
ng serve
Solution 13 - Google Chrome-Devtools
In my case the sourcemaps for node_modules were explicitly excluded from processing. In my webpack.config.js I had to comment out the exclude option in module configuration (the rules part where use: ["source-map-loader"] is).
module: {
rules:[
{
test: /\.js$/,
// exclude: /node_modules/, //this is the line that caused the problem. Remove or comment it out.
enforce: "pre",
use: ["source-map-loader"],
},
],
}
Solution 14 - Google Chrome-Devtools
I used the minified version of the CSS file and it worked for me.
use:
import 'react-toastify/dist/ReactToastify.min.css'
instead of: import 'react-toastify/dist/ReactToastify.css'