Array destructuring transpiles into code that is incompatible with IE11

Bug Report

• I would like to work on a fix!

Current Behavior Transpiling the code below generates code that uses Symbol, which does not run on IE11, even though I have @babel/env set to ie: 11.

Input Code

const oneTwoTree = () => [1, 2, 3];
const [a, b, c] = oneTwoTree();

Output Code

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var oneTwoTree = function oneTwoTree() {
  return [1, 2, 3];
};

var _oneTwoTree = oneTwoTree(),
    _oneTwoTree2 = _slicedToArray(_oneTwoTree, 3),
    a = _oneTwoTree2[0],
    b = _oneTwoTree2[1],
    c = _oneTwoTree2[2];

Expected behavior/code Transpiled code that runs on IE11.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

module.exports = function(api) {                                                                                       
  return {                                                                                                             
    presets: [                                                                                                         
      [                                                                                                                
        '@babel/env',                                                                                                  
        {                                                                                                              
          modules: 'amd',                                                                                              
          targets: {                                                                                                   
            ie: '11',                                                                                                  
            safari: '11'                                                                                               
          }                                                                                                            
        }                                                                                                              
      ],                                                                                                               
      ['@babel/react']                                                                                                 
    ],                                                                                                                 
    sourceMaps: 'both',                                                                                                
    sourceType: 'unambiguous'                                                                                          
  };                                                                                                                   
};                                                                                                                     

Environment

• Babel version(s): v7.8.4
• How you are using Babel: cli

[luwes]

Leaving this snippet here for anyone getting an error in IE11, hope it can help anyone. It took pretty long for me to debug…

Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.

function iterator() {
    var selfThis = this;
    var index = 0;
    var done;

    function Iterator() {}

    Iterator.prototype.next = function() {
        if (index > selfThis.length - 1) {
            done = true;
        }
        if (done) {
            return { value: undefined, done: true };
        }
        return { value: [index, selfThis[index++]], done: false };
    };
	
	// Many small polyfills leave out this method which Babel requires and otherwise throws the above error
    Iterator.prototype[Symbol.iterator] = function() {
        return this;
    };

    return new Iterator();
}

// Needed for: IE 11
if (!Array.prototype.entries) {
    Array.prototype.entries = iterator;
}

// Needed for: IE 11
if (!Array.prototype[Symbol.iterator]) {
    Array.prototype[Symbol.iterator] = iterator;
}

[nicolo-ribaudo]

The problem was that document.body.childNodes is not iterable in old IE versions.

You can now enable the allowArrayLike option of the destructuring transform, or the new arrayLikeIsIterable assumption that will be released in Babel 7.13.0 (https://github.com/babel/rfcs/pull/5).