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