index.rst (3070B)
1 ================= 2 Source map errors 3 ================= 4 5 Source maps are JSON files providing a way to associate transformed sources, as seen by the browser, with their original sources, as written by the developer. You can sometimes encounter problems working with source maps. This page explains the most common problems and how to fix them. 6 7 .. note:: 8 9 If you're new to source maps, you can learn more about them in :doc:`How to use a source map <../how_to/use_a_source_map/index>`. 10 11 12 General source map error reporting 13 ********************************** 14 15 If you do see a problem, a message will appear in the webconsole. This message will show an error message, the resource URL, and the source map URL: 16 17 .. image:: invalid-json.png 18 :alt: Error from invalid JSON 19 :class: border 20 21 Here, the resource URL tells us that ``bundle.js`` mentions a source map, and the source map URL tells us where to find the source map data (in this case, relative to the resource). The error tells us that the source map is not JSON data — so we're serving the wrong file. 22 23 There are a few common ways that source maps can go wrong; they are detailed in the following sections. 24 25 26 Source map missing or inaccessible 27 ********************************** 28 29 The source map resource can be missing or inaccessible. 30 31 .. image:: missing-map.png 32 :alt: Source map file is missing 33 :class: border 34 35 The fix here is to make sure the file is being served and is accessible to the browser 36 37 38 Invalid source map 39 ****************** 40 41 The source map data can be invalid — either not a JSON file at all, or with an incorrect structure. Typical error messages here are: 42 43 44 - ``SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data`` 45 - ``Error: "version" is a required argument`` 46 47 .. image:: missing-field.png 48 :class: border 49 :alt: Error: "version" is a required argument 50 51 52 Original source missing 53 *********************** 54 55 An original source may be missing. You may encounter this when trying to open one of the original sources in the debugger. The message looks a little different in this case: 56 57 .. image:: screenshot_from_2017-09-15_14-32-02.png 58 :alt: Debugger source tab showing the error 59 :class: border 60 61 62 In this case, the error will also be displayed in the source tab in the debugger: 63 64 .. image:: debugger-tab.png 65 :alt: Debugger source tab showing the error 66 :class: border 67 68 69 NetworkError when attempting to fetch resource 70 ********************************************** 71 72 A bug in Firefox prevents it from loading source maps for WebExtensions. 73 74 See `Bug 1437937: WebExtensions Doesn't Find Source Maps <https://bugzilla.mozilla.org/show_bug.cgi?id=1437937>`_ for details. 75 76 .. code-block: html 77 Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource. 78 Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js 79 Source-Map-Adresse: background.js.map</pre> 80 81 The only workaround is to manually change the map URL to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.