How can I fix the "DevTools failed to load SourceMap: Could not load content" error when adding a JavaScript library?

B

19

128

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

Bimolecular answered 14/4, 2020 at 10:19 Comment(8)

The URL is incorrect, the resource was not found. – Aerothermodynamics 14/4, 2020 at 10:21

but this is given by Tensorflow doc – Bimolecular 14/4, 2020 at 10:21

Just put that URL to the address bar and hit ENTER, the resource doesn't exist. – Aerothermodynamics 14/4, 2020 at 10:22

no, it works. Just tried. – Bimolecular 14/4, 2020 at 10:23

What sourcery is that? If I click the link, the page says "Failed to resolve the requested file.". – Aerothermodynamics 14/4, 2020 at 10:24

No, I put the src links which are in the script tag on the addr bar – Bimolecular 14/4, 2020 at 10:25

The script loading wasn't the problem, "Could not load content for ..." is ..? – Aerothermodynamics 14/4, 2020 at 10:27

can you tell me how to fix it – Bimolecular 14/4, 2020 at 10:30

M

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.

Margitmargo answered 1/10, 2020 at 9:42 Comment(8)

Removing that line fixed showing that warning, but I have no idea what it does. – Darling 2/12, 2020 at 11:50

This should be the top answer +1 – Fagaly 19/2, 2021 at 20:57

This works, but could anyone please explain why it was there and what it does? – Stackhouse 22/3, 2021 at 17:33

Source map urls, by definition, are comments (see MDN Docs). So the only solution is to remove it. – Fuzz 9/5, 2021 at 20:37

What if you add a space between "//" and "#"? Is there a difference? (Google's (internal) coding standards mandates a space.) – Mascot 10/9, 2021 at 16:46

That line has apparently been inserted by a minification tool. – Mascot 11/9, 2021 at 14:44

Nope. This doesnt solve the problem. My Json is formatted correctly. Only Chrome Developer console showing this error, but the script is still working regardless. just ignore? – Prendergast 22/9, 2021 at 13:22

@PeterMortensen google seems to mandate no space in this case (developer.chrome.com/blog/sourcemaps); adding the space fixes it for me, but I think because its the equivalent of such a statement not being there; i.e. no space is the required syntax – Hurleigh 14/12, 2022 at 16:24

S

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

Sheetfed answered 12/8, 2020 at 18:58 Comment(10)

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! – Demulsify 15/9, 2020 at 7:53

This answer is basically "if it doesn't work, just uninstall and the error will be gone" – Candlepin 4/2, 2021 at 18:40

Great answer - however, if I don't want (and don't need) source maps then why would Chrome Devtools be bugging me about it? The unselected state of those 2 checkboxes should be the default ... – Davita 20/3, 2021 at 9:58

Deactivating AdBlock not solving the problem – Kaleb 16/4, 2021 at 21:20

@Kaleb Try next steps. – Sheetfed 17/4, 2021 at 19:17

Unchecking those 2 options without disabling the AdBlock solved the problem. – Rupiah 23/4, 2021 at 6:45

How did this get 76 upvotes? This is wrong. Are you going to disable this on each users PC that uses your webpage? – Balmacaan 17/5, 2021 at 18:15

This only remove warning message from your browser and this is like skipping a problem. – Commodity 13/9, 2021 at 10:46

Another solution is to close your eyes. I now keep my eyes closed at all times, and I never see this warning. Problem solved! – Hairdo 15/3, 2022 at 14:25

Note that by following this answer, u won't be able to see TypeScript files in dev tools Console and Sources tab. – Nitrochloroform 20/1, 2023 at 20:34

M

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.

Margitmargo answered 1/10, 2020 at 9:42 Comment(8)

Removing that line fixed showing that warning, but I have no idea what it does. – Darling 2/12, 2020 at 11:50

This should be the top answer +1 – Fagaly 19/2, 2021 at 20:57

This works, but could anyone please explain why it was there and what it does? – Stackhouse 22/3, 2021 at 17:33

Source map urls, by definition, are comments (see MDN Docs). So the only solution is to remove it. – Fuzz 9/5, 2021 at 20:37

What if you add a space between "//" and "#"? Is there a difference? (Google's (internal) coding standards mandates a space.) – Mascot 10/9, 2021 at 16:46

That line has apparently been inserted by a minification tool. – Mascot 11/9, 2021 at 14:44

Nope. This doesnt solve the problem. My Json is formatted correctly. Only Chrome Developer console showing this error, but the script is still working regardless. just ignore? – Prendergast 22/9, 2021 at 13:22

@PeterMortensen google seems to mandate no space in this case (developer.chrome.com/blog/sourcemaps); adding the space fixes it for me, but I think because its the equivalent of such a statement not being there; i.e. no space is the required syntax – Hurleigh 14/12, 2022 at 16:24

R

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.

Relinquish answered 5/5, 2020 at 10:47 Comment(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). – Simulated 8/12, 2022 at 19:28

L

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.

Landau answered 4/12, 2020 at 11:20 Comment(4)

This removes the message, but doesn't solve the problem. – Wildman 18/2, 2021 at 22:3

It does solve the problem, assuming that I'm not interested in source maps – Davita 20/3, 2021 at 10:7

No, this is completely wrong. This is only for your browser, are you expecting each user that uses this webpage to change their settings? – Balmacaan 17/5, 2021 at 18:25

This is essentially identical to GAURAV MOKASHI's answer (though with an awesome screenshot). – Mascot 10/9, 2021 at 17:3

I

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.

Imprecate answered 6/1, 2021 at 19:40 Comment(5)

This is similar to Ivan's answer. – Mascot 10/9, 2021 at 17:6

That line has apparently been inserted by a minification tool. – Mascot 11/9, 2021 at 14:49

@Imprecate this works. Any idea how it worked ? or the reason of existence of /*# sourceMappingURL=bootstrap.min.css.map */ line ? – Damico 14/8, 2022 at 15:57

@sashiksu, oh, it was too long since. Just "plug and play". Currently busy with other things – Imprecate 16/8, 2022 at 13:32

you are a king! – Rabassa 22/2, 2023 at 13:58

E

8

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

Escalate answered 9/7, 2020 at 13:34 Comment(2)

but that won't be done to all computers. – Objective 27/3, 2022 at 18:35

Thank you. This approach worked for me. Frankly this error is really annoying. – Photoreconnaissance 2/1, 2023 at 19:32

C

7

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'

Cane answered 4/5, 2022 at 6:18 Comment(0)

H

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:

Hunnicutt answered 29/10, 2020 at 13:16 Comment(1)

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 – Plug 6/11, 2020 at 0:37

E

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>

Economics answered 23/4, 2020 at 11:25 Comment(0)

M

2

Sometimes it’s an error caused by adblocker extensions.

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

Millimeter answered 15/7, 2022 at 5:17 Comment(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. – Dunsany 11/10, 2022 at 14:55

W

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>

Westwardly answered 6/5, 2020 at 7:6 Comment(0)

A

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:

Quit Chrome
Delete your full Chrome cache folder
Restart Chrome

Amazed answered 18/6, 2020 at 14:41 Comment(0)

D

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"],
        },
    ],
}

Dissonant answered 15/1, 2022 at 8:57 Comment(0)

S

0

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

Scrubland answered 28/8, 2020 at 11:36 Comment(1)

Can you provide some more details? In its current form I don't think it is that useful. – Mascot 10/9, 2021 at 16:44

S

0

I get this warning in Angular if I run:

ng serve --sourceMap=false

To fix:

ng serve

Simulation answered 14/10, 2020 at 9:33 Comment(1)

What does it do (or is supposed to do)? Why does it work? – Mascot 10/9, 2021 at 16:48

D

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)

Dees answered 3/2, 2023 at 5:3 Comment(0)

M

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

Maurita answered 7/5, 2023 at 13:18 Comment(0)

E

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.

Explode answered 29/5, 2023 at 2:40 Comment(0)

P

0

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

Pascoe answered 22/9, 2023 at 10:5 Comment(0)

My code

Error information

Recommended topics

Hot tags