On Firefox, the finally method from Promise prototype don't work when a Vue project is included as a library

[Gnuk]

Version

3.8.4

Reproduction link

https://github.com/Gnuk/vue-cli-polyfill-finally-firefox-issue

Environment info

Environment Info:

  System:
    OS: Linux 5.1 Arch Linux undefined
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 67.0.4
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.8.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.8.0 
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0 
    @vue/cli-plugin-typescript: ^3.8.0 => 3.8.1 
    @vue/cli-service: ^3.8.0 => 3.8.4 
    @vue/cli-shared-utils:  3.8.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    typescript: ^3.4.3 => 3.5.2 
    vue: ^2.6.10 => 2.6.10 
    vue-class-component: ^7.0.2 => 7.1.0 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-property-decorator: ^8.1.0 => 8.2.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 3.8.4

Steps to reproduce

From finlib folder, launch npm i and then npm run build:lib to build the Vue project as a library.

Publish it in a npm registry (i used Verdaccio).

I don't test it using npm link.

From finhost folder, launch npm i (you propably should edit .npmrc to add your registry URL and remove package-lock.json before).

Launch the project using npm run serve and open the app on:

• Firefox - You should see this message inside the terminal:

  [Vue warn]: Error in created hook: "TypeError: promise.finally is not a function"
  
  found in
  
  ---> <HelloWorld> at src/components/HelloWorld.vue
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
  

• Chrome - There is a native usage, you will see:

  Finally should work
  

What is expected?

The finally method from Promise should work without side effects from another Vue library.

What is actually happening?

The finally method from Promise don't work on Firefox.

---

Maybe Firefox is not the only browser with this issue.

[san-kumar]

I am having the exact same issue on Firefox (though it seems to work without problem on Chrome)

I fixed it by running the following command

yarn upgrade --latest

[Gnuk]

In my research I saw that ES6 Promise is the only one exported when I use a Promise in my library part. I never tried to use finally inside the library, maybe ES7 finally Promise will be exported I don't know.

[san-kumar]

This could be possibly related to your problem:
#2012 (comment)

[Gnuk]

Yes I think you're right @san-kumar but es7.promise.finally is not included inside the exported library file, you can check it with the example I put above.

[haoqunjiang]

Well, this seems to be a quite tricky problem.
The root cause is the same as this one: babel/babel#9705

The promise & promise.finally polyfill used by finhost is overridden by the promise polyfill from finlib and that one does not contain the finally feature.
Because for library target we don't add default polyfills for size concerns, the promise polyfill is auto-detected and added by @babel/preset-env's usage feature.

One workaround is to change finlib/babel.config.js to:

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: ['es6.promise', 'es7.promise.finally']
    }]
  ]
}

And rebuild & republish it.