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"
},
core-js/stable
andcross-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.useBuiltins
totrue
to avoid double polyfillings.