1

I'm having trouble getting Nuxt and babel when trying to polyfill firebase for IE11. I'm not sure what I am missing.

useBuiltIns: "usage" IE11 returns an error of Object doesn't support property or method 'values'

When useBuiltIns: "entry" IE11 returns an error of Object doesn't support property or method 'assign'

nuxt.config.js

babel: {
    presets({ envName }) {
      const envTargets = {
        client: {
          browsers: ["last 2 versions"],
          ie: 11
        },
        server: {
          node: "current"
        },
      }
      return [
        [
          "@nuxt/babel-preset-app",
          {
            useBuiltIns: "usage",
            polyfills: ['es6.array.iterator', 'es6.promise', 'es6.object.assign', 'es7.object.values', 'es7.promise.finally'],
            targets: envTargets[envName]
          }
        ]
      ]
    },

package.json

  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.10.1",
    "@babel/polyfill": "^7.10.1",
    "@babel/runtime-corejs2": "^7.10.2",
    "@vue/babel-preset-app": "^4.4.1",
    "bootstrap": "^4.5.0",
    "bootstrap-vue": "^2.15.0",
    "core-js": "2.6.11",
    "firebase": "^7.15.0",
    "node-sass": "^4.14.1",
    "nuxt": "^2.12.2",
    "sass-loader": "^8.0.2",
    "vue-select": "^3.10.3"
  },
5
  • You could try to add the core-js/stable and cross-fetch/polyfill suggested in the firebase doc about polyfills. They're suggested to be used in IE 11. Besides, you could refer to this article about how to use firebase and Nuxt.js. It shows how to support old browsers using babel in part 5.
    – Yu Zhou
    Jun 11, 2020 at 6:14
  • I've tried importing those packages in via the nuxt plugins (with updating core-js to v3 as the firebase docs suggest) but I still have the same issue. Thanks for sharing the article but it refers to nuxt v1, and they have changed the way babel is used/declared in nuxt v2
    – Scaalees
    Jun 11, 2020 at 8:06
  • Which line and which file does the error point to? For the second issue, I found a similar thread in github. There's a solution below you could refer to: (1) adding 'babel-polyfill' to vendors in nuxt.config.js; (2) setting useBuiltins to true to avoid double polyfillings.
    – Yu Zhou
    Jun 11, 2020 at 8:26
  • Yeah I've already looked at this, again it's using nuxt v1 so the babel config is a little different in v2. I've tried to amend it to work with v2 config but it doesn't seem to work. If you have any ideas that would be great, thanks again
    – Scaalees
    Jun 11, 2020 at 9:29
  • Could you please provide a minimal, reproducible sample? You could show your sample using some online code editors like CodeSandbox. So that we can have a better understading of the issue and can have a test on our end. Thanks for your understanding.
    – Yu Zhou
    Jun 12, 2020 at 2:22

1 Answer 1

-1

Firebase has its own polyfill package included in the sdk.

You need to import that package by:

  1. Creating /plugins/polyfills.js containing:
import '@firebase/polyfill';

You can, instead, import in that file the polyfills you think you need individually, so the final bundle will be smaller. Example:

import '@firebase/polyfill/node_modules/core-js/features/object/values';
  1. Add to your nuxt.config.js:
plugins: [
  { src: '~plugins/polyfills', mode: 'client' },
],
1
  • firebase states in the package readme: "This package is not intended for direct usage, and should only be used via the officially supported firebase package."
    – d7my
    Aug 30, 2021 at 5:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.