Recently, in the process of developing with webpack-dev-server
, the console has been reporting a warning: DevTools failed to parse SourceMap: webpack:///node_modules/[email protected]@sockjs-client/dist/sockjs.js.map
. Here’s how to eliminate this warning:
Sourcemap Technology
Before dealing with this warning, it is important to understand what SourceMap is and what it is used for. When writing a website, if there are many javascript files, when rendering the content to the client browser, if we use a packaging tool like webpack, we can merge and compress those js files and remove the spaces and other elements from them, thus reducing the file size and improving the responsiveness of the page. However, the problem is that the js file cannot be debugged in the browser because the compressed file is compact, without spaces and line breaks.
In a nutshell, SourceMap is how to map compressed js code into formatted code. When you deploy code in the Production environment, along with the compressed and optimized js code, there is also a sourcemap file that contains the original js code. When Chrome, the client browser, receives this compressed js file, it automatically looks for the relevant sourcemap file on the server and converts the compressed js code into formatted js code.
Remove warning
Scheme 1: disable sourcemap browser function
First open DevTools of Chrome browser as follows:
uncheck
Enable JavaScript Source maps

the warning disappears after disabling this function in the browser, but this does not fundamentally solve the problem.
Scheme 2: configure webpack
Add 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"
};
Read More:
- DevTools failed to load SourceMap Could not load content [Solved]
- The difference between Scanner.next() and Scanner.nextLine()
- [Solved] IDEA2021.3 Error: Failed to write core dump. Minidumps are not enabled by default on client versions of
- Frequent log swiping after Nacos client starts [How to Solve]
- [Solved] java.security.AccessControlException: Access Denied Error
- [Solved] XFire Error: org.codehaus.xfire.fault.XFireFault
- [Solved] jar file Execute Error: power shell error: unable to access jarfile
- [Solved] shiro Error: SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder“.
- [Solved] Java XXX: unable to find topic engine in module path
- [Maven] maven filtering OTS parsing error incorrect file size in WOFF head [Two Methods to Solve]
- The node requests the API address written by java to report an error error:getaddrinfo ENOTFOUND
- [Solved] Flink1.12 integrate Hadoop 3.X error: java.lang.RuntimeException…
- keytool error: java.lang.Exception: Input not an X.509 certificate
- Error in make when installing redis6.0 in centos7
- Springboot WARNING: An illegal reflective access operation has occurred
- How to Solve Swagger error: typeerror: failed to fetch
- Java error: unable to find or load main class (package name in source file)
- How to Solve Mybatis error: invalid bound statement (not found)
- [Solved] SpringBoot Error: This application has no explicit mapping for /error,so you are seeing this as a fallback
- [Solved] Spring upload file Error: Multipartfile Transferto() reported an error FileNotFoundException