133

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

Improve this question
8
  • 2
    The URL is incorrect, the resource was not found. Commented Apr 14, 2020 at 10:21
  • 1
    but this is given by Tensorflow doc Commented Apr 14, 2020 at 10:21
  • Just put that URL to the address bar and hit ENTER, the resource doesn't exist. Commented Apr 14, 2020 at 10:22
  • 4
    no, it works. Just tried. Commented Apr 14, 2020 at 10:23
  • What sourcery is that? If I click the link, the page says "Failed to resolve the requested file.". Commented Apr 14, 2020 at 10:24

20 Answers 20

Reset to default
137

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.)

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

It worked, but isn't this removing the question and not fixing it? the problem is solved on browser terminal not in web page code!
This answer is basically "if it doesn't work, just uninstall and the error will be gone"
Unchecking those 2 options without disabling the AdBlock solved the problem.
How did this get 76 upvotes? This is wrong. Are you going to disable this on each users PC that uses your webpage?
Another solution is to close your eyes. I now keep my eyes closed at all times, and I never see this warning. Problem solved!
|
88

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.

Improve this answer

8 Comments

Removing that line fixed showing that warning, but I have no idea what it does.
This should be the top answer +1
This works, but could anyone please explain why it was there and what it does?
Source map urls, by definition, are comments (see MDN Docs). So the only solution is to remove it.
What if you add a space between "//" and "#"? Is there a difference? (Google's (internal) coding standards mandates a space.)
|
23

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.

Improve this answer

1 Comment

This link stopped it from working all-together for me. The original link ("instead of" listed above) works still, but throws the same error in the question (as of 12/2022).
16

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.

In setting of the Inspect element

Uncheck the options 'Enable JavaScript source maps' and 'Enable CSS source map'

Improve this answer

4 Comments

This removes the message, but doesn't solve the problem.
It does solve the problem, assuming that I'm not interested in source maps
No, this is completely wrong. This is only for your browser, are you expecting each user that uses this webpage to change their settings?
This is essentially identical to GAURAV MOKASHI's answer (though with an awesome screenshot).
14

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.

Improve this answer

5 Comments

This is similar to Ivan's answer.
That line has apparently been inserted by a minification tool.
@CodeToLife this works. Any idea how it worked ? or the reason of existence of /*# sourceMappingURL=bootstrap.min.css.map */ line ?
@sashiksu, oh, it was too long since. Just "plug and play". Currently busy with other things
you are a king!
8

In my case, I had to deactivate Adblock and it worked fine.

Improve this answer

2 Comments

but that won't be done to all computers.
Thank you. This approach worked for me. Frankly this error is really annoying.
6

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'

Improve this answer

Comments

3

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:

Error seems to be from React Dev Tools extension in my case

Improve this answer

1 Comment

I tracked this issue down as it relates to the latest version of the React DevTools Chrome Extension. The fix has still not been released at the time of my comment but it looks like they are working on it: github.com/facebook/react/pull/20079
2

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>
Improve this answer

Comments

2

Sometimes it’s an error caused by adblocker extensions.

Make sure looking in another browser or disable extensions of this type.

Improve this answer

1 Comment

I had this same issue. Nothing I was doing would fix it, and then I tried opening my web app in another chrome window under "guest" and it worked. I assume that the issue was caused by an extension on my primary chrome account.
1

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:

  1. Quit Chrome
  2. Delete your full Chrome cache folder
  3. Restart Chrome
Improve this answer

Comments

1

While the fix as per Valeri works, it’s only for tfjs.

If you're expecting for body-pix or any other TensorFlow or models, you would be facing the same. It is an open issue too and the team is working on the fix!

[extension] DevTools failed to load SourceMap: Could not load content for browser-polyfill.js.map #1977

But, if you don't have a 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>
Improve this answer

Comments

1

In my case, the sourcemaps for node_modules folder 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"], }, ], }
Improve this answer

Comments

0

I get this warning in Angular if I run:

ng serve --sourceMap=false

To fix:

ng serve
Improve this answer

1 Comment

What does it do (or is supposed to do)? Why does it work?
0

In my case, some broken URL was found in a layout.

Improve this answer

1 Comment

Can you provide some more details? In its current form I don't think it is that useful.
0

A rather trivial fix that doesn't require adjusting the browser settings at all is just to create file hammer.min.js.map in your Hammer folder and make its content an empty JSON object, that is, { }.

Improve this answer

Comments

0

A little late to the party, but I ran into the same problem. The issue is due to the mapping. The url won't work entirely so you can just go to https://www.jsdelivr.com search for chartjs and copy the html code to use. As of May 28, 2023 it's <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>. Issue solved.

Improve this answer

Comments

0

I had some commented code in my main spring boot file, I deleted the code and then my pages loaded successfully.

Improve this answer

Comments

0

Noticed the same problem with twgl js. Fixed by downloading the required source map to required place in the project.

  1. Got the problem when copied https://twgljs.org/dist/6.x/twgl-full.js as twgl-full.v6.1.0.js. Browser was permanently annoying me with failed to load SourceMap for twgl-full.js.map with HTTP 404. A request to this/any resource can't just come out of blue.
  2. Searched the project for string twgl-full.js.map and found //# sourceMappingURL=twgl-full.js.map in my copy twgl-full.v6.1.0.js. Googled for the meaning //# sourceMappingURL, so here is the meaning, then downloaded https://twgljs.org/dist/6.x/twgl-full.js.map and problem fixed.
Improve this answer

Comments

-1

You can escape this by require your puppeteer from different environment.

  • your_project (folder)
    • back_end modules (folder)
      • vendor.js (require puppeteer here)
    • electron modules (folder)
      • vendor.js (require vendor.js from back_end folder)
  • main.js (electron main.js file) (require here vendor.js from electron modules folder)
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.