How to Remove “Devtools failed to parse source-map” Warning

Few users are complaining that they are continuously getting a warning message by means of the console.

Warning Message: DevTools failed to parse SourceMap: webpack:///node_modules/_sockjs-client@1.4.0@sockjs-client/dist/sockjs.js.map.

If you are also facing this annoying warning. Then this post is definitely going to be beneficial to you.

Before proceeding with the solution first of all let’s know about some basic terminology.

What are DevTools?

DevTool is also known as inspecting element, it is a built-in feature of any web browser. It allows developers to work with a variety of web technologies including HTML, CSS, JavaScript. Most web browsers such as Google Chrome, Firefox, Internet Explorer, Safari, Microsoft Edge, etc. It allows the developers to view and make changes to the DOM. It helps developers in finding and fixing the issues/errors in the layouts and functionality you may find across browsers.

What is Sourcemap?

Sourcemap is a file format that allows software tools for JavaScript to display different code to a user than the code actually executed by the computer. Basically, it is a file that maps from the changed source to the original/ first source, enabling the browser to recreate the original source and present the recreated unique or original in the debugger.

Basically, SourceMap is the means by which to map compressed js code into organized code. Whenever you deploy/ send code in the production environment alongside the compressed and enhanced js code, there is additionally a source map file are available that contains the original js code. Whenever Chrome, the client browser gets this packed js record, it automatically searches for the pertinent/ relevant source map file on the server and converts the compacted js code into arranged js code.

Removing the DevTools Failed to Parse Sourcemap Warning:

A few methods are listed below follow these methods to remove this warning message.

• Disable the source map browser function.
• Configure Webpack.

1] Disable the source map browser function

• Open Chrome browser.
• Right-click on the Chrome browser.
• Select the inspect option.
• This execution will open the inspect section.
• Now, click on Settings.

• From the left pane of the settings section, click on the Preferences option.
• From the right pane search for the Sources section.
• Now, uncheck the ‘Enable JavsScript Source maps from the Sources section.

I Hope, the warning might disappear after the execution of the above instructions. If still, you are getting this error then you can move to the next method.

2] Configure Wabpack

Add this to devtool: "inline-source-map" in webpack.config.js, as follows:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"),
    filename: "index.html"
});

module.exports = {
    mode: "development",
    // mode: "production"
    plugins: [
        htmlPlugin
    ],
    module: {
        rules: [
            {
                test: /.js|jsx$/,
                use: "babel-loader",
                exclude: /node_modules/
            }
        ]
    },
    devtool: "inline-source-map"
};