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

@cheerun 's solution helped me figure out what I hope is a nicer solution https://github.com/webpack/webpack-dev-server/issues/1090#issuecomment-329739449

I wanted to add something that wasn’t immediately clear for others. The file to edit is located at

/node_modules/webpack-dev-server/client/socket.js

What I changed was one line, from this

function socket(url, handlers) {

to this

const socket = function(url, handlers) {

@shellscape I will create a PR for this.

@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/
  ]
}

closing this one citing the workarounds listed in the issue and confirmations the issue has been cleared up in the latest Safari version

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!

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.

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

Please fix this in recent version for safari 10. Its urgent.

I want this to be fixed on Safari 10 . How to fix this ?

this means being unable to hit dev URLs on iOS10. not optimal?