javascript - Transpiling Array.prototype.flat away with @babel?

Question

I inadvertently introduced a backwards compatibility issue in my React app by using Array.prototype.flat. I was very surprised this didn't get resolved by transpiling - I thought this would result in es2015 compatible code.

How can I get Babel 7 to transpile this? (If my reading of the sources is right in Babel 6 there was still a plugin for this but since this has begun to roll out to browsers support has been dropped?)

Tools:

• @babel/[email protected]
• [email protected]

My top-level configuration files look like this:

webpack.config.js

var path = require('path')

module.exports = {
  entry: "./src/index.js",
  output: {
      path: path.join(__dirname, 'dist', 'assets'),
      filename: "bundle.js",
      sourceMapFilename: "bundle.map"
  },
  devtool: '#source-map',
  module: {
      rules: [
          {
              test: /.js$/,
              exclude: /(node_modules)/,
              loader: 'babel-loader'
          }
      ]
  }}

.babelrc

{
  "presets": [ "@babel/preset-env", "@babel/react" ],
  "plugins": [["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]]
}

.browserslistrc

chrome 58
ie 11

Answer 1

Here is an important note: You cannot "transpile it away". You can only polyfill this.

In order to do this you can use

• core-js@3 installed as runtime dependency
• a configuration of @babel/preset-env to have useBuiltIns: usage, this imports the needed polyfills where needed instead of manually having import @babel/polyfill in the source code

The entire .babelrc is configured like so

  "presets": [                                                                                                                                               
    [                                                                                                                                                        
      "@babel/preset-env",                                                                                                                                   
      {                                                                                                                                                      
        "targets": {                                                                                                                                         
          "node": 4                                                                                                                                          
        },                                                                                                                                                   
        "useBuiltIns": "usage",                                                                                                                              
        "corejs": 3                                                                                                                                          
      }                                                                                                                                                      
    ]                                                                                                                                                        
  ]                                                                                                                                                          
}     

Alternatively you could have @babel/polyfill as a runtime dependency in your package.json and import "@babel/polyfill" in your code.

All of the details you need are on this page https://babeljs.io/docs/en/babel-polyfill but there is a lot of subtlety

I created this minimal example to demonstrate

https://github.com/cmdcolin/babel-array-flat-demo

After compiling you get proper imports added to your file https://github.com/cmdcolin/babel-array-flat-demo/blob/master/dist/index.js and this works with old versions of node.