Webpack-dev-server: Source Map (`sockjs.js.map`) results in 404 request

[bazineta]

• Operating System: OSX
• Node Version: 6.11.5
• NPM Version: 3.10.10
• webpack Version: 3.8.1
• webpack-dev-server Version: 2.9.3

• [ ] This is a bug
• [ ] This is a feature request
• [x] This is a modification request

Code

  // webpack.config.js

Actual Behavior

In recent releases, when using the Chrome inspector, a source map for sockjs is detected and a request is made to the server for /sockjs.js.map, which 404's on the server side. It'd be nice if the source map directive could be removed to avoid this.

//# sourceMappingURL=sockjs.js.map

[shellscape]

We'd be happy to examine a pull request.

[bazineta]

I believe this was introduced by #1148; certainly willing to help with a PR, but would appreciate some direction.

[shellscape]

ping @filipesilva

[filipesilva]

Hm I see what's happening... The built lib has a //# sourceMappingURL=sockjs.min.js.map and that gets bundled as is. Then the browser tries to look it up.

To remove the source map directive (or load the sourcemap properly) the webpack config for the app would need to process this file.

This is a similar problem to the one addressed by #1148, where the a workaround was added to prevent the build configuration of webpack-dev-server to affect the client app.

I'm not sure what the 'real' solution is besides separating the builds... @shellscape I noticed that the npm version of webpack-dev-server actually seems to have bundles for stuff (client/{index,live,sockjs}.bundle.js). Are these used? It sorta feels like using them would fix this class of problems.

[shellscape]

@filipesilva nah those client bundles are used in a totally different way. modus-manual-script, modus-inline, modus-frame examples all use the prebuilt client scripts. But the bundles for the other modes have to be built on-demand. Don't really want to go into the "why" of that, but changing that would require yet another refactor, and I'm not quite done with the refactor to get us to v3.

As a workaround, you could use the DefineWebpackPlugin to set that string; sourceMappingURL=sockjs.min.js.map to an empty string. It's a hack, but it'd probably work just fine.

[aiibe]

I added devtool: 'inline-source-map' in webpack.config.js. It seems to work for me.

[sfengyuan]

Even I tried inline-source-map , firefox console still complains, it won't show in network tab.

Source map error: request failed with status 404 Resource URL: http://localhost:8081/app.js Source Map URL: sockjs.js.map

I have tried all 7 type of source maps with mimium context (no babel, no any transformations, just pure webpack with two simple js)

chrome mentions souce maps detected, but it is never show it.

[parkerault]

I'm getting this warning as well, any updates? I am starting a new project and I want to keep the console as clean as possible to avoid confusing junior devs.

• Operating System: Linux Mint 18.3
• Node Version: 8.11.1
• Yarn Version: 1.6.0
• webpack Version: 4.6.0
• webpack-dev-server Version: 3.1.3

[shellscape]

@parkerault webpack-serve

[parkerault]

@shellscape thanks for the reply, but can you elaborate?

[marharyta]

having the same issue as @parkerault described, same versions of webpack and dev server. Any updates?

[alexander-akait]

webpack-dev-server in maintenance mode. webpack-server (https://github.com/webpack-contrib/webpack-serve) is current stable and long term support version.

We rewrite many parts of webpack ecosystem on easy and light versions. It is fast and very stable and flexibility. Perhaps for some it seems strange why we are releasing new packages. Since the existence of webpack, we have received a lot of experience and feedback from the developers, it has allowed us to develop new approaches to solve the problems that you face. Some parts of ecosystem have problem in architecture, we can't break packages because many people still use their.

[marharyta]

@evilebottnawi But how do I create source maps with it? My primary problem is that I need good source map support but I cannot find any info on it from webpack-serve

[alexander-akait]

@marharyta source maps is part of webpack, please read https://webpack.js.org/configuration/devtool/

[marharyta]

That is exactly what does not work for me: whenever I am including devtool (any option) it points me to client.js in browser @evilebottnawi and not to the right fule (see screenshots attached)

[fredyrivas]

I added devtool: 'inline-source-map' in webpack.config.js. It seems to work for me.

you saved my life

[alexander-akait]

Somebody still has problem? if yes, please create minimum reproducible test repo, thanks!

[alexander-akait]

Closing due to inactivity. Please test with latest version and feel free to reopen if still regressions. Thanks!

[art-solopov]

I've ran into this issue today, and I just wanna comment for everyone's information, that sometimes those 404 errors result from the HTML file and the dev server running on different ports. In my case, it was a Roda app running on localhost:9292 (generating HTML) and the dev server running on localhost:8080. The dev server tried to guess to connect to localhost:9292 (based on window.location), which naturally results in 404s. devServer.public is your friend here.

[cnwebdev]

This save my day too. Thanks!

added devtool: 'inline-source-map' in webpack.config.js. It seems to work for me.

[Aniss-nahim]

inline-source-map - A SourceMap is added as a DataUrl to the bundle.
Source maps are an integral tool to accurately pinpointing bugs within our source code (the files we actually write code in). Very helpful for debugging.
here is the documentation : https://webpack.js.org/configuration/devtool/

[patrick-s-young]

I added devtool: 'inline-source-map' in webpack.config.js. It seems to work for me.

This worked for me as well. Be sure to restart your webpack server after updating webpack.config.js.