Transpiling Array.prototype.flat Away With @babel?

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 t

Solution 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.