vuejs/vue

Compiler-sfc generates ES5 code with arrow functions which breaks IE11.

granowski-bamboo opened this issue · 4 comments

Vue version

2.7

Link to minimal reproduction

https://github.com/granowski-bamboo/vue27-arrow-fn-ie11-thing/tree/main

Steps to reproduce

One repository provided is checked out.
Run
npm install
`npm run build'

What is expected?

The dist folder should contain javascript that has been compiled down to ES5.

What is actually happening?

The dist folder should contain javascript that has been compiled down to ES5.
The JavaScript should be as compatible as possible with older browsers. Vue 2.6 still supported IE11 (based on an actual project we're running here at Bamboo Health) and as of Vue 2.7 the arrow functions were added which breaks IE11.

System Info

System:
    OS: macOS 13.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 29.20 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Edge: 114.0.1823.55
    Safari: 16.5
  npmPackages:
    vue: ^2.7.7 => 2.7.14

Any additional comments?

At Bamboo Health we have some Vue applications, we unfortunately have a lot of Healthcare partners that still use IE11...
Unfortunately some of our partners have deals with companies like Microsoft to get private support for IE11 even after its official death by Microsoft.
Our product group and security group has asked us to ensure our applications meet a high-trust environment. We're trying to upgrade our apps to Vue 2.x latest or Vue 3 as possible and ran into this problem where IE11 breaks with Vue 2.7

Screenshot 2023-06-20 at 9 48 21 AM

Here's an attached screenshot of the dependencies that were compiled down. We can see that the makeMap() function is coming from the compiler-sfc code.

The code is coming from here:
https://github.com/vuejs/core/blob/d2c3d8b70b2df6e16f053a7ac58e6b04e7b2078f/packages/shared/src/makeMap.ts#L17

I'll move this to the Vue 2 repo as IE11 is explicitly not suppported by Vue 3.

Seems like the minimal reproduction you provide cannot reproduce the issue. I didn't find any arrow functions.

I think it could be caused by your bundler tooling. vue/compiler-sfc should not be bundled in a Vue app.

Closing as not-reproducible