Search code examples
firebasevue.jsbabeljsinternet-explorer-11

Show blank page on IE11 when add firebase to Vue Project

  • My Vue project used Firebase Auth for sign in and sign up but when added firebase package to project, it show blank page on ie11. Firebase and Vue Cli Plugin Babel package:
"firebase": "9.6.1",
"@vue/cli-plugin-babel": "4.4.4"
  • Babel config:
module.exports = {
    presets: [['@vue/app', { useBuiltIns: 'entry' }]]
}

Thanks

Solution

  • I read Firebase docs in here: https://firebase.google.com/docs/web/environments-js-sdk#suggested-polyfills. I resolved this problem as follow:

    • babel.config.js:
    module.exports = {
  presets: [['@vue/app', { useBuiltIns: 'entry' }]]
}
    • In main.js
    import 'core-js/stable'
import 'cross-fetch/polyfill'
import 'indexeddb-getall-shim'
    • In Package.json: Add more pakage:
    "cross-fetch": "^3.1.5"
"core-js": "3.6.5",
"indexeddb-getall-shim": "^1.3.6"
    • In vue.config.js:

    transpileDependencies: [

    // can be string or regex

    '@firebase',

    /graphql/ ]

    But i still don't understand the problem.