Webpack-dev-server: `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

• [x] 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?

[bitwikinger]

I was facing the same issue, then I updated iOS (and Safari) to version 11.0.whatever and it´s working fine.
Btw. I am using webpack 2.4.x and webpack-dev-server 2.4.x.

[shellscape]

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

[gmarinov]

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

[lakinmohapatra]

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

[lakinmohapatra]

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

[shellscape]

@lakinmohapatra please do not post successive comments on an issue within seconds of each other, it's considered bad form. instead, edit your previous comment. workarounds for this issue have been posted by other users, we recommend trying those.

[lakinmohapatra]

Okay got it .

[hlawuleka]

For me I edited web-pack-dev-server/client/socket.js as follows:
```
'use strict';

function socket(url, handlers) {

let retries = 0;
let sock = null;
var SockJS = require('sockjs-client/dist/sockjs');
sock = new SockJS(url);

sock.onopen = function onopen() {
retries = 0;
};```

[abcd-ca]

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

[Jay-PC]

After working through this and a related issue, and not wanting to rely on Safari 11 upgrades, I found a different work-around... in the project folder, i forced the local CLI up to the latest version...

npm install --save-dev @angular/cli@latest

my app ran fine in Safari 10.x after that. Granted, some of my npm dependencies will now probably need to be updated, but fortunately all of them appeared to work even with some warnings upon ng serve.