IE not working for me. 'Symbol' is undefined

[JonDReese]

My website stopped working in IE after adding vue-router. I decided to find a working example and was surprised to find the same error here.

All I did is

• git clone https://github.com/gothinkster/vue-realworld-example-app.git
• cd vue-realworld-example-app
• yarn install
• yarn serve
• opened http://localhost:8080 in Internet Explorer

[Vue warn]: Error in render: "ReferenceError: 'Symbol' is undefined"

found in ---> at src/components/ArticleList.vue ...

This example is supposed to work in IE right? Is there a new version of something in package.json that broke this?

[igeligel]

Hey. This is an issue but can be fixed easily.

The problem here is that we develop with a recent version of JavaScript which is not supported in Internet Explorer. To get this new JavaScript working in old browsers it is compiled with Babel. You can try out their REPL here: https://babeljs.io/repl and type something like const a = 123. But Babel is just compiling code blocks and not simulating new methods for arrays and such for example. If you want to get a bit more in-depth check out this article: https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

So with babel there is a plugin callend babel-preset-env which will check your browserlists file which can find here in this repository: https://github.com/gothinkster/vue-realworld-example-app/blob/master/.browserslistrc which is including compilation target Internet Explorer 10 and above. But like i said some things are not supported when it comes to new functionality. For this we would need to include polyfills. This can be done manually but then everyone would need to load them and this would bloat the application quite a bit. A better approach is to use a service like https://polyfill.io/v2/docs/ to automatically load polyfills depending on your browser.

I will try to create a Pull Request regarding this problem in this repository to show case how it is done.

[JonDReese]

As you guessed I'm new to these types of problems, so thank you for the helpful response.

If I'm understanding you right, vue-router must be using a feature that babel isn't handling?

It sounds like we need to add a symbol polyfilll?

https://github.com/medikoo/es6-symbol I'll try this out, it was the first thing i found searching for "Symbol polyfill"

[igeligel]

I guessed that you are new so gave some more thoughtful answer :)

If I'm understanding you right, vue-router must be using a feature that babel isn't handling?

You are understanding it right. Every time you get errors like this, go to MDN and check the documentation about the type which is not supported. In this case, you can find it here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

As you can see in the Browser compatibility table no Internet Explorer support is given at all.

To solve this you can use a polyfill like https://babeljs.io/docs/en/babel-polyfill or https://github.com/medikoo/es6-symbol . I do not recommend this because then you would load the polyfill even if the browser is supporting this.

Like I said I would use Polyfill.io.

https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Symbol is the URL which you can query. It will check the user-agent of the request and determine your browser as written as in the docs: https://polyfill.io/v2/docs/

The default user agent for Internet Explorer is Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko. You can mock the behavior of polyfill.io with the following URL: https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Symbol&ua=Mozilla/5.0%20(Windows%20NT%206.3;%20Trident/7.0;%20rv:11.0)%20like%20Gecko (do not use this in production. leave the ua off).

You can find examples like this also on the polyfill.io site: https://polyfill.io/v2/docs/examples

[igeligel]

Hey @JonDReese ,

I have made a PR here: #105 Would be nice if you could check this out and see if it works on your machine.

Thanks, Kevin

[JonDReese]

Thanks! Trying it out now.

[JonDReese]

Works! You rock :)

Personally I'm still having an issue on my site, because my IE error is slightly different: ""Unable to get property '__
symbol:toStringTag0.03521717070493940411' of undefined or null reference""

Something else must be already attempting to polyfill Symbol on my project. Regardless, I've got a much better idea of how to fix it now.

[igeligel]

If you are using a custom polyfill then there might be a weird setup sometimes. Definitely recommend using the service above i mentioned.