`eval-source-map` results in "Can't find variable: SockJS" in Safari on Mac and iOS with v2.8.x

[purdrew]

• Operating System: macOS 10.12.6
• Node Version: v7.10.0
• NPM Version: 4.2.0
• webpack Version: 2.7.0
• webpack-dev-server Version: 2.8.2

• This is a feature request
• This is a bug

Code

Sample code here

Expected Behavior

Using the eval-source-map option for devtool should not affect the ability to render the page.

Actual Behavior

With version 2.8.x it seems like specifying eval-source-map for devtool is causing an error that is preventing rendering on Safari on Mac and iOS. Rendering seems fine on Chrome/Firefox, but when loading the page in Safari I'm getting:

ReferenceError: Can't find variable: SockJS

I suspect something in the "Cleanup Effort" commit might have broke this but haven't identified what. Maybe something to do with uglifyJS plugin being added

How can we reproduce the behavior?

The gist has a complete code sample that exhibits the issue:

1. Download the gist code.
2. npm install
3. npm start
4. Load localhost:8000 in Safari and open dev tools console to see error. Notice the page doesn't render either.
5. Kill the npm start
6. Open webpack.config.js and remove devtool: 'eval-source-map'.
7. npm start
8. Load localhost:8000 in Safari and notice it now renders and the dev tools console is clean.

[shellscape]

If you haven't already, give devtool: 'source-map' a try. It works with the latest version as can be seen in the example here.

I can certainly understand the frustration that 2.8.x introduced a regression and this has ceased to work correctly for you. There seems to be a never ending number of edge cases in the webpack world that surfaces with each release. For this particular one bugbear, we'll happily welcome a PR from the community to resolve it. In the meantime, you might choose to use source-map which does work as expected, or you could try the EvalSourceMapDevToolPlugin as talked about here.

[cheerun]

It occurs on the not only 2.8.x, but also ~ 2.2.0. (or maybe lower version too.)

I changed code to below (with helping by @shai, my colleague at work), It works well.

// webpack-dev-server/client/socket.js
var SockJS = require('sockjs-client');

var retries = 0;
var sock = null;

function socket(url, handlers) {
  sock = new SockJS(url);
  ...

I don't know why scope is recognized weirdly, but it works!

[xiaody]

It seems that Safari has trouble in understanding const scopes in eval. I use babel-plugin-transform-es2015-block-scoping to workaround this issue.

[shellscape]

@deedubbu do either of the two solutions here work for your setup?

[karneaud]

tried this with babel-plugin-transform-es2015-block-scoping did not work.

[xiaody]

@karneaud You need to include webpack-dev-server's js files in the babel-loader.
The config looks like:

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    path.resolve(__dirname, './src'),
    // webpack-dev-server#1090 for Safari
    /node_modules\/webpack-dev-server/
  ]
}

[auchEnia]

Seems like the issue has been fixed in Safari 11.0. Can anyone else confirm that?