Repository navigation
eval-source-map results in "Can't find variable: SockJS" in Safari on Mac and iOS with v2.8.x #1090
Description
Activity
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-mapwhich does work as expected, or you could try theEvalSourceMapDevToolPluginas talked about here.Reacted by Shaun O’Connell, Darragh Enright, Michael Black Ritter, 李白翔 and ETiVIt 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!
Reacted by Dmitry MinkovskyReacted by Shai Ben-Naphtali, Vladyslav Poshvaniuk, Andrew Blair and Choi Cheolheon@deedubbu do either of the two solutions here work for your setup?
tried this with
babel-plugin-transform-es2015-block-scopingdid not work.@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/ ] }Reacted by Terry Mun-Andersen, ansonschall, redmed, Sam Sharpe and Vincent ZhangReacted by ollie, Sam Sharpe and Vincent ZhangSeems like the issue has been fixed in Safari 11.0. Can anyone else confirm that?
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.closing this one citing the workarounds listed in the issue and confirmations the issue has been cleared up in the latest Safari version
Reacted by polyglotinc, Nikolai, Andrew Blair, Alex Chaparro, 猫仔面, Emilio Martinez and Adam Folwarcznythis means being unable to hit dev URLs on iOS10. not optimal?
Reacted by polyglotincI want this to be fixed on Safari 10 .
How to fix this ?Reacted by polyglotincPlease fix this in recent version for safari 10. Its urgent.
Reacted by polyglotinc and Alex Zaytsev@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.
Okay got it .
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; };```@cheerun 's solution helped me figure out what I hope is a nicer solution #1090 (comment)
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.
Reacted by Andrew Powell, Alex Chaparro, Aaron Gottlieb, Joseph Brasch, Siva Subramaniam, Ori Shalom, Vincent Zhang and Fabian KundeReacted by Joseph Brasch and Vincent Zhang- added a commit that references this issue
on Dec 18, 2017 - added a commit that references this issue
on Dec 22, 2017 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@latestmy 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.
Code
Sample code here
Expected Behavior
Using the
eval-source-mapoption fordevtoolshould not affect the ability to render the page.Actual Behavior
With version
2.8.xit seems like specifyingeval-source-mapfordevtoolis 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: SockJSI 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:
npm installnpm startlocalhost:8000in Safari and open dev tools console to see error. Notice the page doesn't render either.npm startwebpack.config.jsand removedevtool: 'eval-source-map'.npm startlocalhost:8000in Safari and notice it now renders and the dev tools console is clean.