Problem using Firefox ESR 45.4.0 and Vuejs 2 - vue.js

I am trying to deploy a vue application. I have to use Firefox ESR as browser (45.4.0) but I get the following error: TypeError: Object.values is not a function. If I use a different browser it works fine.
Could anyone help me?
Thank you

Support for Object.values was introduced in Firefox 47.
Your browser is from 2015. That is hideously ancient in Internet terms. Upgrade it.
(If you really want to to get the Vue application to work, you'll need to set up a Polyfill for Object.values. There is one linked from the MDN page I linked to above. It should also be available in core-js which can be used with Babel in the transpiling step of your build process.)

Related

Vue project with or without Babel?

I am using Vue CLI to create a Vue 2.0 project and one of the options is using Babel. I understand Babel is a transpiler but what exactly does it do? I created a project with it and another without it and I don't see the difference so what exactly is the pro/con of it ? I can't see offhand what it is doing.
You are correct. Babel is a transpiler. It transpiles your JavaScript code to one or more taget browsers, that does not support the lastest fetures. You will not see any difference, if using a newer browser.
Babal usually only makes sense if you need to support older browsers, like IE 11 or browsers from before 2017.

Force older version of vuejs devtools or download older version

Recently vue devtools was updated to a newer version. I am using the devtools heavily to check my vuex store. After the update the data does not show anymore. The data is updated after mutations but not shown in the devtool.
Does anyone know how to use the older version again?
Thanks in advance!
All releases can be found on their Github page: Here
Download your preferred version, then follow the steps written under Manual installation
You can install the legacy dev tools extension for Chrome.
See more info on the documentation
There is a Settings tab on the newer version which allows you to keep the Veux store synchronized at all times.
All you need to do is to enable it.

'Gatsby develop' support for IE11

Say I wanted to support IE11 (and sadly, I do), how would I go about making gatsby develop work on that poor old browser?
Right now, I get this message:
webpack-hot-middleware's client requires EventSource to work.
This polyfill looks promising, but that's as far as I've made it.
Any help?
P.S. Probably worth mentioning that I'm using Gatsby v 2.4.7
Looks like Gatsby doesn't support IE in development, only in production, so no polyfills will be added and IE will error when using gatsby develop.
https://www.gatsbyjs.org/packages/babel-preset-gatsby/
Can confirm on my project that running gatsby develop doesn't make it work for IE11, but using gatsby build does. When running gatsby develop, all I could see on IE11 is a blank page.
As per the documentation of Gatsby, You need to use babel 7.
Babel helps ensure the JavaScript you write works across different browsers (including older versions of Internet Explorer).
Reference:
Babel 7 (Gatsby)
Gatsby leverages Babel 7’s ability to automatically add polyfills for your target browsers.
Newer browsers support more JavaScript APIs than older browsers. For older versions, Gatsby (via Babel) automatically adds the minimum “polyfills” necessary for your code to work in those browsers.
If you start using a newer JavaScript API like [].includes that isn’t supported by some of your targeted browsers, you won’t have to worry about it breaking the older browsers as Babel will automatically add the needed polyfill core-js/modules/es7.array.includes.
Reference:
Browser Support

Object doesn't support property or method 'getRootNode' Polymer 2.x Internet Explorer ERROR

I am having an issue in IE11 and EDGE 14
Object doesn't support property or method 'getRootNode'
from webcomponents-hi-sd-ce.js
Any Ideas how to resolve this?
I am serving es5 code built using polymer-build
I have noticed that the Node.prototype.getRootNode function does exists in my page in ie11. This means that the polyfill is loaded by the time that get to the console and can log something
Using compilation for your project you may consider to add at the top of your entry point
import 'core-js'
At the moment core-js polyfill library is the easiest way to make Cross Browser Support

TypeMismatchError on post

I'm writing an aurelia application with aurelia-fetch-client library.
When I try to post an object to my api service I get the error:
TypeMismatchError
In console only from Edge. Other browsers (Chrome, Firefox and IE11) have no problems. There are no description or any other details about it.
In all but the newest versions of Edge you need to include the fetch polyfill in order for aurelia-fetch-client to work. I think it's supported since version 14 but I wouldn't necessarily rely on it. Edge is known to be quirky with some of these things (the Promise implementation is also horribly slow, which is why I personally always use bluebird)
You can install it with npm i whatwg-fetch --save and make sure to import it + include it in your bundle config (the instructions for this depend on which build system you're using)