Error in render: "ReferenceError: 'Symbol' is undefined" when run on IE11

[dtsao]

Using the vue-webpack template 1.2.6 and portal-vue 1.2.1. My index.html has some complicated markup for the page header/footer including some navigation links. Vue is controlling a div in the middle of the page. I am using portal-vue to set the navigation links in the header based on some process.env variables from a config file so these can be customized for dev/qa/prod. This is working fine in Chrome and Firefox, but is failing in IE11. In IE11, the original contents of header div targeted by portal-vue is removed but is not being replaced by the portal content. The console is giving the following errors. How do I troubleshoot?

Thanks

[LinusBorg]

Hard to say without knowing any of your code.

Portal-vue doesn't use Symbols, so my first quest would be to find out where that 'Symbol' is coming from.

[dtsao]

@LinusBorg, I created a simple project reproduces the error on 2 different Windows 10 PC running IE11 with node v6.11.5 or v8.9.3: https://github.com/dtsao/portal-vue-test-ie11

The error occurs when running using the webpack dev server and IE11, but goes away when running a production build.

My IE11 version:

Chrome:

IE11 - note that the portal-vue content is missing:

Console:

Step through exceptions to find the matching error:

etc.

On my full blown application, the error is in line 5 of: node_modules\core-js\library\modules_iter-detect.js

This may be relevant: babel/babel-preset-env#203

[LinusBorg]

Ah, I see. now I get it. The source for that passage is this:

export function combinePassengers (transports) {
  let passengers = []
  for (const transport of transports) {
    passengers = passengers.concat(transport.passengers)
  }
  return passengers
}

It was introduced with #80

the for ... of doesn't work without a polyfill. I'll change that to an ES5 counterpart.

[LinusBorg]

See #94.

Just released v1.2.2 with that fix.

[dtsao]

Great - thank you for the fix!