In our project we have been using Object.keys() and Object.values() a lot! Since it's Magento (1) based we've had it polyfilled with Prototype.js (without knowing that it came from that).

We have however discovered some performance issues that seem directly related to Prototype.js so we want to remove it.

I don't want to change every placed they are used. Instead I want a good polyfill that is loaded only for browsers which doesn't support it by default. I want the polyfill to be hosted on our servers also to avoid any strange bugs if the cdn were to be down (we have an own cdn solution).

Everything Babel is kind of confusing to me. Webpack is also semi-new to me and confusing at times.. There seems to have been a change in the syntax of the webpack.config, and as we are using some older spec. it's even more confusing trying to follow documentation and googling for answers. I guess we should update to the new spec. some time soon.

We have this today, relevant sections,

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

const BUILD_DIR = path.resolve(__dirname, 'build/');
const APP_DIR = path.resolve(__dirname, 'src/');

module.exports = function config(env, argv = {}) {
  return {
    entry: ['core-js', 'formdata-polyfill', 'whatwg-fetch', `${APP_DIR}/index.js`],
    output: {
      path: BUILD_DIR,
      filename: 'react-frontend.js',
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      modules: [
        path.resolve(__dirname, 'src/'),
        'node_modules',
      ],
      alias: {
        panyName: path.resolve(__dirname, './src/panyName.js'),
      },
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          include: APP_DIR,
          loader: ['babel-loader', 'eslint-loader'],
        },

packages.json

{
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-proto-to-assign": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017-node7": "^0.5.2",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "core-js-bundle": "^3.0.0-alpha.1",
    "formdata-polyfill": "^3.0.12",
    "react": "^16.3.0",
    "webpack": "^3.11.0",
    "whatwg-fetch": "^2.0.4"

I'm afraid of just adding / if it adds polyfills for things we already have polyfills for..

Except for Object.values() we seem to have working polyfills for everything else we need, supporting the most used browsers latest 2 versions + IE11.

Or should we just add: ?

Edit: Updated question, I saw that Object.keys() was already working but not Object.values().

In our project we have been using Object.keys() and Object.values() a lot! Since it's Magento (1) based we've had it polyfilled with Prototype.js (without knowing that it came from that).

We have however discovered some performance issues that seem directly related to Prototype.js so we want to remove it.

I don't want to change every placed they are used. Instead I want a good polyfill that is loaded only for browsers which doesn't support it by default. I want the polyfill to be hosted on our servers also to avoid any strange bugs if the cdn were to be down (we have an own cdn solution).

Everything Babel is kind of confusing to me. Webpack is also semi-new to me and confusing at times.. There seems to have been a change in the syntax of the webpack.config, and as we are using some older spec. it's even more confusing trying to follow documentation and googling for answers. I guess we should update to the new spec. some time soon.

We have this today, relevant sections,

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

const BUILD_DIR = path.resolve(__dirname, 'build/');
const APP_DIR = path.resolve(__dirname, 'src/');

module.exports = function config(env, argv = {}) {
  return {
    entry: ['core-js', 'formdata-polyfill', 'whatwg-fetch', `${APP_DIR}/index.js`],
    output: {
      path: BUILD_DIR,
      filename: 'react-frontend.js',
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      modules: [
        path.resolve(__dirname, 'src/'),
        'node_modules',
      ],
      alias: {
        panyName: path.resolve(__dirname, './src/panyName.js'),
      },
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          include: APP_DIR,
          loader: ['babel-loader', 'eslint-loader'],
        },

packages.json

{
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-proto-to-assign": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017-node7": "^0.5.2",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "core-js-bundle": "^3.0.0-alpha.1",
    "formdata-polyfill": "^3.0.12",
    "react": "^16.3.0",
    "webpack": "^3.11.0",
    "whatwg-fetch": "^2.0.4"

I'm afraid of just adding https://babeljs.io/docs/en/babel-polyfill/ if it adds polyfills for things we already have polyfills for..

Except for Object.values() we seem to have working polyfills for everything else we need, supporting the most used browsers latest 2 versions + IE11.

Or should we just add: https://www.npmjs./package/es7-object-polyfill ?

Edit: Updated question, I saw that Object.keys() was already working but not Object.values().

• javascript
• reactjs
• webpack
• babeljs
• polyfills

• 2 Babel polyfill is a wrapper for core-js. Use it directly the way you want. keys is ES5. It's doesn't fall under same category as values. Did you mean entries? – Estus Flask Commented Dec 9, 2018 at 14:25
• @estus thanks, I noticed now that Object.keys() was already working fine, not Object.values() though, which seems to be slightly different from Object.entries(). – OZZIE Commented Dec 10, 2018 at 10:45
• You're already using core-js which is reliable source for polyfills. What you're trying to do with Object.values is a hack, I'd suggest to fix problems with core-js instead. Object.values is one of many things that may go wrong if you applied polyfills incorrectly. if it adds polyfills for things we already have polyfills for.. - it uses core-js any way, and core-js doesn't add polyfills for things that are already properly polyfilled. – Estus Flask Commented Dec 10, 2018 at 11:09
• useful background: github./IBM/carbon-ponents-react/issues/… – ptim Commented Mar 19, 2019 at 3:31

1 Answer 1

I noticed now that Object.keys() was already working fine, not Object.values() though, which seems to be slightly different from Object.entries()

So I added a simple polyfill for it like this.

index.js

import './polyfills';

polyfills.js

const objectToValuesPolyfill = (object) => {
  return Object.keys(object).map(key => object[key]);
};
Object.values = Object.values || objectToValuesPolyfill;