0

Lately, a lot of errors have started to come up, referring to this:

Object.entries is not a function

This piece of code is used in several places in Vue components.

There is also a .browserslistrc file:

defaults

Recently, this error began to come from devices running iOS 10.1 (Facebook 68.0.0). Until then, it was only found on Andrioid <6. And now all this began to strain a lot.

Tell me, please, how can I fix this situation? Maybe something needs to be written in the .browserslistrc file? Or something else? There are no other similar issues in JS.

Colibri
  • 993
  • 11
  • 29
  • 2
    [Object.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Browser_compatibility) is supported from safari on iOS 10.3, at least from what i am reading. You should probably move down to ES6, polyfill it, ... – ASDFGerte Oct 17 '19 at 17:11
  • @ASDFGerte Can this be fixed somehow? At the same time for Android <6 too. – Colibri Oct 17 '19 at 17:14
  • Tons of ways, i don't have too much experience in doing this though, as i hardly ever have to cater to older versions (lucky me!). As said, downemit to ES6 (e.g. with babel, or if you use typescript anyways, then configure tsc, ...), add a polyfill for the function (if it's only that one, and not a bunch of other ES2017+ functions aswell), ... – ASDFGerte Oct 17 '19 at 17:16
  • See my answer to [this question](https://stackoverflow.com/questions/52452501). – David Weldon Oct 17 '19 at 17:23
  • @ASDFGerte It seems to me that I have a normal config and I need to fix one, the minimum. It has CoreJS. I'm afraid to break it. Can you please tell me? https://pastebin.com/raw/tZrx4MRg – Colibri Oct 17 '19 at 17:32

1 Answers1

1

It seems that the devices/browsers you mentioned don't support Object.entries. To support environments that do not natively support Object.entires, make sure that in the polyfill section of your babel.config.js file, you add es7.object.entries. If you see es6.object in this section, remove it.

Example:

module.exports = {
  presets: [
    [
      "@vue/app",
      {
        polyfills: ["es7.object.entries"]
      }
    ]
  ]
};
Jonathan Irvin
  • 896
  • 8
  • 17
  • What if I don't have `@vue/app`? I just have a config built based on Webpacker (https://pastebin.com/raw/tZrx4MRg). – Colibri Oct 17 '19 at 17:36
  • After looking at your config file, I believe this plugin will solve your problem. DISCLAIMER: I haven't ever had to use it. But you should be able to add it to the section with the rest of your plugins. Plugin name: "transform-es2017-object-entries" https://www.npmjs.com/package/babel-plugin-transform-es2017-object-entries – Jonathan Irvin Oct 17 '19 at 20:51