Quasar: [15.1] ie11 fails with syntax error at strip-ansi eval

[Lou-Der]

White screen on startup.

Reproduced this on a clean init project,

From my limited searching skills, I think this is related to https://github.com/webpack/webpack-dev-server/issues/1286

[pdanpdan]

Can you please open the inspector in IE and paste the errors here?

[Lou-Der]

SCRIPT1002: Syntax error
File: app.js, Line: 1556, Column: 1

Here is lines 1552-1556:

// "./node_modules/strip-ansi/index.js":
// (function(module, exports, __webpack_require__) {

"use strict";
eval("nconst ansiRegex = __webpack_require__(\"./node_modules/ansi-regex/index.js\");nnmodule.exports = input => typeof input === 'string' ? input.replace(ansiRegex(), '') : input;nn//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvc3RyaXAtYW5zaS9pbmRleC5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL25vZGVfbW9kdWxlcy9zdHJpcC1hbnNpL2luZGV4LmpzPzI2NDciXSwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBzdHJpY3QnO1xuY29uc3QgYW5zaVJlZ2V4ID0gcmVxdWlyZSgnYW5zaS1yZWdleCcpO1xuXG5tb2R1bGUuZXhwb3J0cyA9IGlucHV0ID0+IHR5cGVvZiBpbnB1dCA9PT0gJ3N0cmluZycgPyBpbnB1dC5yZXBsYWNlKGFuc2lSZWdleCgpLCAnJykgOiBpbnB1dDtcblxuXG5cbi8vLy8vLy8vLy8vLy8vLy8vL1xuLy8gV0VCUEFDSyBGT09URVJcbi8vIC4vbm9kZV9tb2R1bGVzL3N0cmlwLWFuc2kvaW5kZXguanNcbi8vIG1vZHVsZSBpZCA9IC4vbm9kZV9tb2R1bGVzL3N0cmlwLWFuc2kvaW5kZXguanNcbi8vIG1vZHVsZSBjaHVua3MgPSAzIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=n//# sourceURL=webpack-internal:///./node_modules/strip-ansi/index.jsn");

[wc-matteo]

I don't know if it is related to this but the language pack doesn't pass through babel (tested with quasar build) and it uses es6 syntax;

selectedRows: rows => rows > 0 ? `${rows} row${rows === 1 ? '' : 's'} selected.` : 'No selected rows.',

So the file is not transpiled and it is put directly into the vendor bundle.

---

You can fix it with:

extendWebpack(cfg) {
    for (const rule of cfg.module.rules) {
        if (rule.loader === 'babel-loader') {
            rule.include.push(
                path.resolve(__dirname, 'node_modules/quasar-framework/i18n')
            )
        }
    }
}

in the build section of you _quasar.conf.js_.

[Lou-Der]

Just confirmed ie11 issue is not in dist build.

This only occurs in the localhost:8080 dev mode.

[rstoenescu]

Fixed it in v0.15.2 (released already).

[Lou-Der]

Updated to 0.15.2 on starter-kit

Sorry to say it still has the same error....

[rstoenescu]

Pls redo your tests. Run a "quasar info". Make sure you are indeed using 0.15.2. I am 100% sure this issue reported here is fixed.

[Lou-Der]

Hi,

Sorry if I'm doing something wrong (Still a beginner Vue/Quasar coder) , but this still seem to be an issue. I've cleared cache, tried another PC, confirmed IE is in edge mode, etc, etc. I'm stumped.

Here are the steps I did to update and the quasar output.

E:\VSCode\test>npm update quasar-cli --save

[email protected] postinstall E:\VSCode\testnode_modules\quasar-cli
node lib/node-version-check.js

npm WARN [email protected] requires a peer of eslint-plugin-promise@>=3.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@>=1.6.0 <4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

• [email protected]
  added 3 packages, removed 10 packages and updated 18 packages in 31.977s

E:\VSCode\test>quasar info

Operating System Windows_NT(6.1.7601) - win32/x64
NodeJs 8.9.4

Global packages
NPM 5.6.0
yarn Not available
quasar-cli 0.15.3
vue-cli 2.9.3
cordova Not available

Important local packages
quasar-cli 0.15.3 (Quasar Framework CLI)
quasar-framework 0.15.3 (Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS)
quasar-extras 1.0.2 (Quasar Framework fonts, icons and i18n.)
vue 2.5.13 (Reactive, component-oriented view layer for modern web interfaces.)
vue-router 3.0.1 (Official router for Vue.js 2)
vuex 3.0.1 (state management for Vue.js)
electron Not available
babel-core 6.26.0 (Babel compiler core.)
webpack 3.11.0

I also tried a new starter-kit with ie11 support. Same issue.

Thanks for your help!

[rstoenescu]

Can you show me your quasar.conf.js pls? Trying to figure out something.

[rstoenescu]

I'm adding Object.assign polyfill (as indicated in webpack-dev-server ticket) to the Quasar ie-compat package for CLI v0.15.4. That should fix this. I am buffed though as I cannot reproduce :/

[rstoenescu]

Ok, update to 0.15.4 and make one more try. Should be fixed now. Thanks.

[Lou-Der]

0.15.4 did not fix the issue. Same error.

Just a note, this is IE 11.0.96 on Windows 7 that is failing. IE Edge on Windows 10 works fine (maybe your testing on this?). I assume ie11 compatability is supposed to work on Win7 IE 11?

I didn't make any manual changes to the quasar.conf.js file in the starter-kit test I made. Did you still need it?

[rstoenescu]

Ok, so investigated together with Lou-Der. Seems like a problem with webpack when the dev server is run on a Windows 7 machine and consumed by IE11. However, it is not a problem when the dev server is run on a linux/mac/win10 machine and consumed by a IE11 on a win7 machine.

Will add this to the docs. Unfortunately, until webpack gets a fix we can't do anything. There's nothing wrong from Quasar's side that generates this error.

[Sweetyy]

Hi,

I have still the same issue on the 0.15.4 too:

// "./node_modules/strip-ansi/index.js":
// (function(module, exports, __webpack_require__) {

"use strict";
eval("nconst ansiRegex = __webpack_require__(\"./node_modules/ansi-regex/index.js\");nnmodule.exports = input => typeof input === 'string' ? input.replace(ansiRegex(), '') : input;nn//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvc3RyaXAtYW5zaS9pbmRleC5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL25vZGVfbW9kdWxlcy9zdHJpcC1hbnNpL2luZGV4LmpzPzI2NDciXSwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBzdHJpY3QnO1xuY29uc3QgYW5zaVJlZ2V4ID0gcmVxdWlyZSgnYW5zaS1yZWdleCcpO1xuXG5tb2R1bGUuZXhwb3J0cyA9IGlucHV0ID0+IHR5cGVvZiBpbnB1dCA9PT0gJ3N0cmluZycgPyBpbnB1dC5yZXBsYWNlKGFuc2lSZWdleCgpLCAnJykgOiBpbnB1dDtcblxuXG5cbi8vLy8vLy8vLy8vLy8vLy8vL1xuLy8gV0VCUEFDSyBGT09URVJcbi8vIC4vbm9kZV9tb2R1bGVzL3N0cmlwLWFuc2kvaW5kZXguanNcbi8vIG1vZHVsZSBpZCA9IC4vbm9kZV9tb2R1bGVzL3N0cmlwLWFuc2kvaW5kZXguanNcbi8vIG1vZHVsZSBjaHVua3MgPSAzIl0sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTsiLCJzb3VyY2VSb290IjoiIn0=n//# sourceURL=webpack-internal:///./node_modules/strip-ansi/index.jsn");

This is IE 11.248.16299.0 on Windows 10.

Thanks for the help

[pdanpdan]

Can you please do a small test:
In the folder of the project run npm list prettier or yarn list prettier and tell me the version of the package that is installed? And also do a npm -g list prettier.

[Sweetyy]

npm list prettier: [email protected]
npm -g list prettier: [email protected]

[Aiyibooo]

I have the same issue on the 0.15.10 too.
ie11 on a win10 machine

[solaris7791]

Hi, I have the same transpiling issues with ie11 on Windows 10 with dev-server (build works)
quasar info:
Operating System Windows_NT(10.0.16299) - win32/x64
NodeJs 9.11.1

Global packages
NPM 6.1.0
yarn 1.7.0
quasar-cli 0.16.4
vue-cli 2.9.6
cordova Not installed

Important local packages
quasar-cli 0.16.4
quasar-framework 0.16.0
quasar-extras 2.0.2
vue 2.5.16
vue-router 3.0.1
vuex 3.0.1
electron Not installed
electron-packager Not installed
electron-builder Not installed
babel/core 7.0.0-beta.49
webpack 4.9.1
webpack-dev-server 3.1.4
workbox-webpack-plugin 3.2.0

[rstoenescu]

Hi,

Please use Yarn instead of npm. Delete node_modules folder and install again with Yarn. This is a known issue on webpack + npm combination on Windows. For some reason npm does not gets the right dependency tree.

[solaris7791]

hi, using yarn solved the problem for me :)
super, thx a lot