Browserlist does not seem to be working to target browsers

[sdellis]

This line in the VueDS FAQ seems to indicate that creating different targets should work.

If we want to edit the browsers supported in production we can edit the browsers list in package.json. To see what browsers are selected by the browser list, run npx browserslist --config="package.json" in the root directory of this project.

I have not changed the the browserlist config in VueDS. However, I get errors on IE11 such as "multiple properties not allowed in strict mode" and missing colons.

I have added several of my own components, and have not yet tested with a clean version of VueDS. However, my expectation was that babel would be able to target the browsers in the browserlist config and add any necessary polyfills, but perhaps it needs polyfills to be added manually? If so, I'm not even sure how to determine what to add.

[arielsalminen]

@sdellis hmm, yes, things should be working on IE11 by default. Where are you getting this error? On the docs?

[sdellis]

@viljamis yes, but also on the system build, which I think is the culprit since the docs are using it too.

I don't have easy access to IE11 (downloading a Windows VM now to test) but here's our docs site in case you have IE11 and want to see for yourself. I was using a friend's Windows machine yesterday and it seems that the VueDS example docs is working in IE11, so perhaps there's something strange with one of our components?

Since the error refers to "strict mode" I think it must have something to do with some transpiled ES6 code that uses "generators". I was not able to import it into a VueDS component with the necessary polyfills (they have to load first and I couldn't get it to work in a bundle), so I used Babel to transpile the original source into a utility module that I could import (I don't remember specifying "strict mode").

One final point is that if this hunch is correct, it's perhaps another reason to implement a way to easily codesplit or treeshake VueDS that I mentioned in #111 since the component that uses this utility module is a "mini-app" that is not public facing and does not have to be IE11 compatible.

[sdellis]

@viljamis , so my issue had nothing to do with the transpiled ES6 code. I got the system build working in IE11. It was two things: 1) I accidentally had @input and v-on:input handlers defined on one of my components (explains the multiple properties not allowed error) and 2) I needed to add a polyfill for vuex (import "es6-promise/auto") at the top of my system.js file.

I still haven't gotten the docs to work, but that's for internal use where we can control the browsers. Having the system build working for our end users was the main concern. I'm getting this same error, so perhaps it's related to object shorthand notation (although I added the ecma: 5 option to the UglifyJS plugin and it did not help).

I also tested a freshly cloned copy of the VueDS docs in IE11 and it works, but the components (elements, patterns, templates) do not show up (can share a screen shot) and I get the following error in the console: SCRIPT438: Object doesn't support property or method 'forEach'. I will close this issue, and leave it up to you if you want to create a new issue for that.

[arielsalminen]

@sdellis I think I know where that forEach issue is coming from and am able to fix it in the next release.

[arielsalminen]

All IE11 issues have been fixed in 3.1.0 :)