Version 4.x Breaks ES5 Compatibility

[Dan D]

When attempting to upgrade all packages in my Vue project to current versions, I discovered I am unable to upgrade vue-style-loader from 3.1.2 to 4.1.0 without making my entire site completely broken on iOS 9 on iPhone 4S. I did not test IE 11 but my guess is the error is generic to ES5 browsers (although it could be specific to older versions of mobile Safari, I suppose).

The specific error I was seeing was: "SyntaxError: Attempted to redefine property 'checked'". The error completely blocks rendering of my site in Vue and the user sees a blank, white page. A google search returned facebook/react-native#4032 which, although React-related and not Vue-related, indicated CSS was involved in producing similar error messages for other users. This lead me to suspect that upgrading vue-style-loader to 4.1.0 had broken my site. Sure enough, downgrading back to 3.1.2 fixed the issue completely.

I'm sorry I don't have much more info to share to help you replicate things. Hopefully, the error message will point you in the right direction. Here's my package.js (showing, among other things, my bootstrap version which may be the only place I use "checked" in styles, although it actually seems to be in JS code and not CSS so maybe bootstrap is unrelated):

"dependencies": { "bootstrap": "^3.3.7", "chart.js": "^2.7.1", "detectrtc": "^1.3.5", "downloadjs": "^1.4.7", "font-awesome": "^4.7.0", "lodash": "^4.17.4", "moment": "^2.17.1", "raven-js": "^3.22.3", "recordrtc": "^5.4.5", "tippy.js": "^2.0.2", "uuid": "^3.0.1", "vue": "^2.5.16", "vue-analytics": "^4.1.2", "vue-resource": "^1.3.3", "vue-router": "^2.5.3", "vue-select": "^2.4.0", "vuex": "^3.0.1", "wavesurfer.js": "2.0.5" }, "devDependencies": { "arr-flatten": "^1.0.3", "autoprefixer": "^6.4.0", "babel-core": "^6.24.1", "babel-eslint": "^7.2.3", "babel-loader": "^7.0.0", "babel-plugin-lodash": "^3.2.11", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "babel-register": "^6.24.1", "babel-runtime": "^6.23.0", "chromedriver": "^2.21.2", "connect-history-api-fallback": "^1.1.0", "cross-spawn": "^4.0.2", "css-loader": "^0.25.0", "destroy": "^1.0.4", "ee-first": "^1.1.1", "eslint": "^3.19.0", "eslint-friendly-formatter": "^2.0.5", "eslint-loader": "^1.5.0", "eslint-plugin-html": "^1.3.0", "eventemitter3": "^2.0.3", "eventsource-polyfill": "^0.9.6", "expand-range": "^1.8.2", "expose-loader": "^0.7.1", "express": "^4.15.2", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.9.0", "forwarded": "^0.1.0", "function-bind": "^1.0.2", "html-webpack-plugin": "^2.28.0", "http-errors": "^1.6.1", "http-proxy-middleware": "^0.17.2", "imports-loader": "0.7.1", "ipaddr.js": "^1.3.0", "json-loader": "^0.5.4", "less": "^2.7.1", "less-loader": "^2.2.3", "lodash-webpack-plugin": "^0.11.2", "media-typer": "^0.3.0", "mime": "^1.3.4", "mime-types": "^2.1.15", "ms": "^1.0.0", "negotiator": "^0.6.1", "nightwatch": "^0.9.8", "opn": "^4.0.2", "ora": "^0.3.0", "regjsgen": "^0.3.0", "regjsparser": "^0.2.1", "repeat-element": "^1.1.2", "requires-port": "^1.0.0", "selenium-server": "2.53.1", "shelljs": "^0.7.7", "unpipe": "^1.0.0", "url-loader": "^0.5.7", "vue-loader": "^14.2.2", "vue-style-loader": "^3.1.2", "vue-template-compiler": "^2.5.16", "webpack": "^2.4.1", "webpack-dev-middleware": "^1.10.1", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0" }

I'm using Node v7.10.0.

What is the current behavior?
Critical syntax error thrown in mobile Safari on iOS 9 resulting in completely broken site in both Webpack develop/hot-reload mode and in generated /dist/ app.js files. The specific error is "SyntaxError: Attempted to redefine property 'checked'"

If the current behavior is a bug, please provide the steps to reproduce.
Hopefully just make a project using bootstrap and similar packages to what I'm using and try to load it in mobile Safari version 9.x.

What is the expected behavior?
The site should load without the syntax error.

[Evan You]

I doubt it - apps built using the latest version of vue-style-loader runs fine even in IE10. Also there isn't a single presence of checked in the codebase...

Unfortunately, given the information here there really isn't much we can do.