130

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

8
  • 2
    The URL is incorrect, the resource was not found.
    – Teemu
    Commented Apr 14, 2020 at 10:21
  • 1
    but this is given by Tensorflow doc
    – Edee
    Commented Apr 14, 2020 at 10:21
  • Just put that URL to the address bar and hit ENTER, the resource doesn't exist.
    – Teemu
    Commented Apr 14, 2020 at 10:22
  • 4
    no, it works. Just tried.
    – Edee
    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.".
    – Teemu
    Commented Apr 14, 2020 at 10:24

19 Answers 19

138

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

10
  • 42
    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!
    – Saghachi
    Commented Sep 15, 2020 at 7:53
  • 33
    This answer is basically "if it doesn't work, just uninstall and the error will be gone"
    – kraxor
    Commented Feb 4, 2021 at 18:40
  • 3
    Unchecking those 2 options without disabling the AdBlock solved the problem.
    – philippos
    Commented Apr 23, 2021 at 6:45
  • 18
    How did this get 76 upvotes? This is wrong. Are you going to disable this on each users PC that uses your webpage?
    – Gerhard
    Commented May 17, 2021 at 18:15
  • 18
    Another solution is to close your eyes. I now keep my eyes closed at all times, and I never see this warning. Problem solved!
    – Joakim
    Commented Mar 15, 2022 at 14:25
86

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.

8
  • 4
    Removing that line fixed showing that warning, but I have no idea what it does.
    – 27px
    Commented Dec 2, 2020 at 11:50
  • 2
    This should be the top answer +1
    – Bobby Axe
    Commented Feb 19, 2021 at 20:57
  • 3
    This works, but could anyone please explain why it was there and what it does?
    – K. Shaikh
    Commented Mar 22, 2021 at 17:33
  • 2
    Source map urls, by definition, are comments (see MDN Docs). So the only solution is to remove it.
    – nikhilweee
    Commented May 9, 2021 at 20:37
  • 1
    What if you add a space between "//" and "#"? Is there a difference? (Google's (internal) coding standards mandates a space.) Commented Sep 10, 2021 at 16:46
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.

1
  • 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).
    – jpgerb
    Commented Dec 8, 2022 at 19:28
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'

4
  • 3
    This removes the message, but doesn't solve the problem.
    – jowey
    Commented Feb 18, 2021 at 22:03
  • 1
    It does solve the problem, assuming that I'm not interested in source maps
    – leo
    Commented Mar 20, 2021 at 10:07
  • 9
    No, this is completely wrong. This is only for your browser, are you expecting each user that uses this webpage to change their settings?
    – Gerhard
    Commented May 17, 2021 at 18:25
  • 4
    This is essentially identical to GAURAV MOKASHI's answer (though with an awesome screenshot). Commented Sep 10, 2021 at 17:03
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.

5
  • 2
    This is similar to Ivan's answer. Commented Sep 10, 2021 at 17:06
  • 1
    That line has apparently been inserted by a minification tool. Commented Sep 11, 2021 at 14:49
  • @CodeToLife this works. Any idea how it worked ? or the reason of existence of /*# sourceMappingURL=bootstrap.min.css.map */ line ?
    – sashiksu
    Commented Aug 14, 2022 at 15:57
  • @sashiksu, oh, it was too long since. Just "plug and play". Currently busy with other things
    – CodeToLife
    Commented Aug 16, 2022 at 13:32
  • 1
    you are a king!
    – Benny
    Commented Feb 22, 2023 at 13:58
8

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

2
  • 1
    but that won't be done to all computers.
    – Egidius
    Commented Mar 27, 2022 at 18:35
  • Thank you. This approach worked for me. Frankly this error is really annoying.
    – Roy
    Commented Jan 2, 2023 at 19:32
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'

0
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

1
  • 5
    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 Commented Nov 6, 2020 at 0:37
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>
2

Sometimes it’s an error caused by adblocker extensions.

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

1
  • 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. Commented Oct 11, 2022 at 14:55
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
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>
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"],
        },
    ],
}
0

I get this warning in Angular if I run:

ng serve --sourceMap=false

To fix:

ng serve
1
  • 3
    What does it do (or is supposed to do)? Why does it work? Commented Sep 10, 2021 at 16:48
0

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

1
  • 2
    Can you provide some more details? In its current form I don't think it is that useful. Commented Sep 10, 2021 at 16:44
0

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)
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, { }.

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.

0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.