Symptoms

You get this error into your browser console:

TypeError: Object.entries is not a function.

It means that you are using Object.entries() function in your code (or one of your JS dependencies is using it) but your browser does not support it. According to MDN website, this function is supported on all modern browsers:

Browser support of Object.entries

However, if your users are using Internet Explorer or older versions of Chrome, Firefox or Safari, you will face the error.

Fix

To be able to use this functionality on all browsers, you need to polyfill it on older browsers.

If you are using a Javascript transpiler such as babel (that actually polyfills modern ES6+ features like Object.entries() into old ES5 world) with or without Webpack, make sure your babel configuration is taking into account.

Install babel-preset-es2017 and babel-plugin-transform-runtime using npm or yarn. Then, update your .babelrc to include:

{
  "plugins": ["transform-runtime"],
  "presets": ["es2017"]
}

If you are not using such tool, you can polyfill it yourself by adding the following function to your code:

if (!Object.entries) {
  Object.entries = function (obj) {
    var props = Object.keys(obj),
        i = props.length,
        resArray = new Array(i);
    while (i--) {
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
     }

    return resArray;
  };
}

Hope it helps!

Categories: DebugTech

1 Comment

Hunter · March 21, 2019 at 3:14 pm

just so you know, the ‘var props’ in the third line of the polyfill should be ‘var ownProps’. Otherwise great resource!

Leave a Reply

Your email address will not be published. Required fields are marked *