How to Babel Transpile Object.entries/values in Aurelia CLI app?

Question

When using IE11, I get errors like below anywhere my code uses Object.entries or Object.values:

Unhandled rejection TypeError: Object doesn't support property or method 'entries'...

My problem I figure stems from the code not being transpiled to ES5, but wasn't sure how to check or change my project settings for transpiling/Babel when using the Aurelia CLI.

Looking into it further, I believe the Babel/settings packaged with Aurelia don't support Object.entries/values (or other proposed ES2017 options) so I installed babel-preset-es2017 and babel-plugin-transform-runtime per another thread - Babel support for Object.entries

However, I wasn't able to figure out how to update the project to include these for transpiling. Adding in transform-runtime in the aurelia.json or .babelrc file breaks the au run and simply adding es2017 to the .babelrc file didn't seem to do anything. I was also looking at the jsconfig.json and transpile.js files, but couldn't figure out a solution.

aurelia.json file:

...
"transpiler": {
    "id": "babel",
    "displayName": "Babel",
    "fileExtension": ".js",
    "options": {
        "plugins": [
            "transform-es2015-modules-amd",
            "transform-runtime" <---tried
        ]
    },
    "source": "src/**/*.js"
},
...

.babelrc file:

{
    "sourceMap": true,
    "moduleIds": false,
    "comments": false,
    "compact": false,
    "code": true,
    "presets": ["es2015-loose", "stage-1", "es2017"], <---tried
    "plugins": [
        "syntax-flow",
        "transform-decorators-legacy",
        "transform-flow-strip-types",
        "transform-runtime" <---tried
    ]
}

Adding the transform-runtime in either results in the following error:

Error: ENOENT: no such file or directory, open 'C:\Users...\src\babel-runtime\helpers\classCallCheck.js'

Not sure why I'm getting this error or if fixing it would help, but my guess could be because of the "source": src/**/*.js in aurelia.json

Any help would be greatly appreciated. Thanks!

Object.values will be part of ES2017, it's not part of ES7 (ES2016). — Felix Kling
@FelixKling it wasn't clear to me initially what you were commenting on in pointing that out, but read it over and saw the error. Thanks for catching that. — unchewyglees

unchewyglees unchewyglees · Accepted Answer · 2017-03-16T05:14:06

My solution was installing the following plugin by doing npm install babel-plugin-transform-es2017-object-entries --save-dev, which transpiles object.entries and object.values.

The .babelrc file then looked like this:

{
    "sourceMap": true,
    "moduleIds": false,
    "comments": false,
    "compact": false,
    "code": true,
    "presets": ["es2015-loose", "stage-1"],
    "plugins": [
        "syntax-flow",
        "transform-decorators-legacy",
        "transform-flow-strip-types",
        "transform-es2017-object-entries"
    ]
}

Additionally, according to the Babeljs.io (https://babeljs.io/docs/plugins/preset-es2017/), it appears babel-preset-es2017 does not included a plugin/support for object.entries/values. Also, the purpose of babel-tranform-runtime appears to be for something different from what I needed and is not part of my solution.

How to Babel Transpile Object.entries/values in Aurelia CLI app?

1 Answers