Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does not load in IE 11 due to syntax error #251

Closed
polendri opened this issue Jan 8, 2019 · 5 comments · Fixed by #346
Closed

Does not load in IE 11 due to syntax error #251

polendri opened this issue Jan 8, 2019 · 5 comments · Fixed by #346
Assignees
Labels
bug Something isn't working

Comments

@polendri
Copy link

polendri commented Jan 8, 2019

See minimum repro repository (created using vue create temp and vue add styleguidist).

Run npm run styleguide, open the style guide in IE 11, and observe that it fails to load with a syntax error:

image

The line described in the console error is this one:

"use strict";
eval("\n\nconst generate = __webpack_require__(/*! regjsgen */ \"./node_modules/regjsgen/regjsgen.js\").generate;\nconst parse = __webpack_require__(/*! regjsparser

I would guess this some sort of dependency issue, but I'm not sure how to track it down further.

@elevatebart elevatebart added the bug Something isn't working label Jan 8, 2019
@elevatebart elevatebart self-assigned this Jan 8, 2019
@elevatebart
Copy link
Member

Thank you for this report.
I did not think of checking compatibility with IE 11 with the last releases.
You just made me think of a use case fro it:

  • What if we want to use vsg to run compatibility tests of components.

I will look into it.

@polendri
Copy link
Author

polendri commented Jan 8, 2019 via email

@elevatebart
Copy link
Member

Hi @pshendry,

The solution I found is a little bit more hands on that I would have liked. The issue you are facing with IE 11 is that babel does not compile any of the files in node_modules. And some modules chose to remain es6 compatible only. buble, used by react-styleguidist is one of those modules.

In order to fix your build you will have to track down those modules used by vsg and include them to your babel-loader config. You will find houw to do it in this issue

Tell me if it works.

@polendri
Copy link
Author

polendri commented Jan 16, 2019

Thanks for the help. I think I may have gotten closer, but still no luck getting it to run in IE.

In a Vue CLI project, the transpiling can be done using the transpileDependencies option like this:

vue.config.js:

module.exports = {
    transpileDependencies: [
        "buble",
        "regexpu-core",
        "unicode-match-property-ecmascript",
        "unicode-match-property-value-ecmascript",
    ],

I built up that list of packages one by one by following the error trail, but at this point I get an error like this:

./node_modules/buble/dist/buble-browser.es.js 10172:51-65
"export 'default' (imported as 'rewritePattern') was not found in 'regexpu-core'

Basically that buble-browser.es.js isn't getting transpiled for some reason, so it's failing to import the transpiled regexpu-core library. It should be getting transpiled though, because the way transpileDependencies works in Vue CLI, it will include the file if its path matches the string at all (which is arguably a misfeature, see vuejs/vue-cli#3057). So buble/dist/... should get transpiled as well.

I'm stumped as to how to get any further. If IE 11 isn't supported by this library feel free to close the issue I guess.

@elevatebart
Copy link
Member

Hello @pshendry, Evan works on a mac. Therefore all his slashes are normal. yours are backslashes.

I fought all day with webpack today about it. There is an issue in their regular expression that assumes your OS to be a Mac therefore all buble/dist/whatever are never compiled... that is unfortunate indeed.
You can go ahead and creat a PR to vue-cli if you want this fixed fast. I will probably get on it one day.

Bart

elevatebart added a commit that referenced this issue Mar 22, 2019
* docs(examples): make basic example render on ie 11

* docs(examples): add missing polyfill for ie11 examples

closes #251
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants