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

Question

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

Just put that URL to the address bar and hit ENTER, the resource doesn't exist. — Teemu, Apr 14 '20 at 10:22
What sourcery is that? If I click the link, the page says "_Failed to resolve the requested file._". — Teemu, Apr 14 '20 at 10:24
No, I put the src links which are in the script tag on the addr bar — Edee, Apr 14 '20 at 10:25
The script loading wasn't the problem, "_Could not load content for ..._" is ..? — Teemu, Apr 14 '20 at 10:27

GAURAV MOKASHI · Answer 1 · 2022-05-19T06:49:54.950

135

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

edited May 19 '22 at 06:49

answered Aug 12 '20 at 18:58

GAURAV MOKASHI

1,906
2
14
17

41

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 Sep 15 '20 at 07:53
30

This answer is basically "if it doesn't work, just uninstall and the error will be gone" – kraxor Feb 04 '21 at 18:40
1

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 ... – leo Mar 20 '21 at 09:58
Deactivating AdBlock not solving the problem – Usama Apr 16 '21 at 21:20
@Usama Try next steps. – GAURAV MOKASHI Apr 17 '21 at 19:17
3

Unchecking those 2 options **without** disabling the AdBlock solved the problem. – philippos Apr 23 '21 at 06:45
16

How did this get 76 upvotes? This is wrong. Are you going to disable this on each users PC that uses your webpage? – Gerhard May 17 '21 at 18:15
This only remove warning message from your browser and this is like skipping a problem. – Ali Rehman Sep 13 '21 at 10:46
16

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 Mar 15 '22 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. – Sunil Kumar Das Jan 20 '23 at 20:34

score 84 · Accepted Answer · edited Sep 11 '21 at 14:47

84

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.

edited Sep 11 '21 at 14:47

Peter Mortensen

30,738
21
105
131

answered Oct 01 '20 at 09:42

Ivan

1,274
16
22

4

Removing that line fixed showing that warning, but I have no idea what it does. – 27px Dec 02 '20 at 11:50
2

This should be the top answer +1 – Bobby Axe Feb 19 '21 at 20:57
3

This works, but could anyone please explain why it was there and what it does? – K. Shaikh Mar 22 '21 at 17:33
2

Source map urls, by definition, are comments (see [MDN Docs](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map)). So the only solution is to remove it. – nikhilweee May 09 '21 at 20:37
1

What if you add a space between "//" and "#"? Is there a difference? (Google's (internal) coding standards mandates a space.) – Peter Mortensen Sep 10 '21 at 16:46
That line has apparently been [inserted by a minification tool](https://stackoverflow.com/questions/21719562/how-can-i-use-javascript-source-maps-map-files/36554691#36554691). – Peter Mortensen Sep 11 '21 at 14:44
1

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? – AndiAna Sep 22 '21 at 13:22
@PeterMortensen google seems to mandate no space in this case (https://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 – Jeff Dec 14 '22 at 16:24

score 23 · Answer 3 · edited Sep 10 '21 at 16:15

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.

edited Sep 10 '21 at 16:15

Peter Mortensen

30,738
21
105
131

answered May 05 '20 at 10:47

Valeri Voev

1,982
9
25

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 Dec 08 '22 at 19:28

score 16 · Answer 4 · edited Sep 10 '21 at 17:01

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.

edited Sep 10 '21 at 17:01

Peter Mortensen

30,738
21
105
131

answered Dec 04 '20 at 11:20

Adarsh Bhalani

451
5
10

3

This removes the message, but doesn't solve the problem. – jowey Feb 18 '21 at 22:03
1

It does solve the problem, assuming that I'm not interested in source maps – leo Mar 20 '21 at 10:07
8

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 May 17 '21 at 18:25
4

This is essentially identical to [GAURAV MOKASHI's answer](https://stackoverflow.com/questions/61205390/when-adding-a-javascript-library-chrome-complains-about-a-missing-source-map-w/63383126#63383126) (though with an awesome screenshot). – Peter Mortensen Sep 10 '21 at 17:03

score 14 · Answer 5 · edited Sep 10 '21 at 17:05

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.

edited Sep 10 '21 at 17:05

Peter Mortensen

30,738
21
105
131

answered Jan 06 '21 at 19:40

CodeToLife

3,672
2
41
29

1

This is similar to [Ivan's answer](https://stackoverflow.com/questions/61205390/when-adding-a-javascript-library-chrome-complains-about-a-missing-source-map-w/64152797#64152797). – Peter Mortensen Sep 10 '21 at 17:06
1

That line has apparently been [inserted by a minification tool](https://stackoverflow.com/questions/21719562/how-can-i-use-javascript-source-maps-map-files/36554691#36554691). – Peter Mortensen Sep 11 '21 at 14:49
@CodeToLife this works. Any idea how it worked ? or the reason of existence of `/*# sourceMappingURL=bootstrap.min.css.map */` line ? – sashiksu Aug 14 '22 at 15:57
@sashiksu, oh, it was too long since. Just "plug and play". Currently busy with other things – CodeToLife Aug 16 '22 at 13:32
1

you are a king! – Benny Feb 22 '23 at 13:58

score 8 · Answer 6 · edited Sep 10 '21 at 16:28

8

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

edited Sep 10 '21 at 16:28

Peter Mortensen

30,738
21
105
131

answered Jul 09 '20 at 13:34

Guillaume Caggia

141
1
2

1

but that won't be done to all computers. – Egidius Mar 27 '22 at 18:35
Thank you. This approach worked for me. Frankly this error is really annoying. – Roy Jan 02 '23 at 19:32

score 7 · Answer 7 · edited Aug 18 '22 at 02:23

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'

edited Aug 18 '22 at 02:23

Peter Mortensen

30,738
21
105
131

answered May 04 '22 at 06:18

hardy lutula

129
2
4

score 3 · Answer 8 · edited Sep 10 '21 at 16:50

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:

edited Sep 10 '21 at 16:50

Peter Mortensen

30,738
21
105
131

answered Oct 29 '20 at 13:16

Neil Gaetano Lindberg

2,488
26
23

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: https://github.com/facebook/react/pull/20079 – Craig McKeachie Nov 06 '20 at 00:37

score 2 · Answer 9 · edited Sep 10 '21 at 16:23

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/tfjs@0.9.0"></script>
<!-- Load the coco-ssd model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@1.1.0"</script>

score 2 · Answer 10 · edited Aug 18 '22 at 02:25

2

Sometimes it’s an error caused by adblocker extensions.

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

edited Aug 18 '22 at 02:25

Peter Mortensen

30,738
21
105
131

answered Jul 15 '22 at 05:17

Shoniisra

621
7
6

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. – Andrew Colin Oct 11 '22 at 14:55

score 1 · Answer 11 · edited Aug 18 '22 at 02:15

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/tfjs@1.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@1.0.0"></script>

score 1 · Answer 12 · answered Jun 18 '20 at 14:41

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

answered Jun 18 '20 at 14:41

hyperknot

13,454
24
98
153

score 1 · Answer 13 · edited Aug 18 '22 at 02:21

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

score 0 · Answer 14 · edited Sep 10 '21 at 16:43

0

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

edited Sep 10 '21 at 16:43

Peter Mortensen

30,738
21
105
131

answered Aug 28 '20 at 11:36

Pergin Sheni

393
2
11

2

Can you provide some more details? In its current form I don't think it is that useful. – Peter Mortensen Sep 10 '21 at 16:44

score 0 · Answer 15 · answered Oct 14 '20 at 09:33

0

I get this warning in Angular if I run:

ng serve --sourceMap=false

To fix:

ng serve

answered Oct 14 '20 at 09:33

danday74

52,471
49
232
283

3

What does it do (or is supposed to do)? Why does it work? – Peter Mortensen Sep 10 '21 at 16:48

score 0 · Answer 16 · answered Feb 03 '23 at 05:03

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)

score 0 · Answer 17 · answered May 07 '23 at 13:18

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

answered May 07 '23 at 13:18

Jesse Heines

121
2
4

score 0 · Answer 18 · answered May 29 '23 at 02:40

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/chart.js@4.3.0/dist/chart.umd.min.js"></script>. Issue solved.

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

My code

Error information

18 Answers18

Linked