带有 Babel 和 Webpack 的 IE11 中的“对象不支持属性或方法‘find’”答案

【问题标题】："Object doesn't support property or method 'find'" in IE11 with Babel and Webpack带有 Babel 和 Webpack 的 IE11 中的“对象不支持属性或方法‘find’”
【发布时间】：2018-05-30 22:38:27
【问题描述】：

我在 IE11 中使用 Webpack 和 Babel 时遇到了一些奇怪的行为。目前，发生的问题是以下错误消息：

SCRIPT438: Object doesn't support property or method 'find'

这只发生在 Internet Explorer 中，奇怪的是在本地运行代码时不会发生，只有在发布时才会发生。

const getColumnByName = (columns, columnName) => {   
    return columns.find((col) => col.Name === columnName);
}

通过使用断点，我可以看到代码用空数组调用columns.find 3 次，然后传递一个对象数组。仅在第 4 次引发错误。在 IE 控制台中，我可以在上述函数中运行以下代码行来尝试进一步隔离问题。

Array.isArray(columns)
#=> true

Array.prototype.find
#=> function (predicate) { ...

[1,2,3].find(function(el){return el === 2})
#=> 2

columns.length
#=> 17

columns.find(function(e){return true})
#=> Object doesn't support property or method 'find'

对我来说都很奇怪。

下面是我的 webpack.config 文件，以防万一。

/// <binding ProjectOpened='Watch - Development' />

module.exports = {
  entry: [
    'babel-polyfill',
    './Scripts/App.js',
    ],
  output: {
    filename: 'Scripts/ReactBundle/bundle.js'
  },
  resolve: {
    extensions: ['.Webpack.js', '.web.js', '.js', '.jsx'],
    mainFields: ["main"]
  },
  module: {
      rules: [
        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        },
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',               
            query:
                  {
                      presets: ['react', 'es2017', 'es2015', 'stage-2'],
                      plugins: ['transform-class-properties']
                  }
        },
      ]
  },  
}

提前感谢您的任何帮助或意见。

【问题讨论】：

标签： javascript reactjs webpack internet-explorer-11 babeljs

【解决方案1】：

columns 是否可能是 NodeList 类型或其他不包含 find 方法但在特定浏览器中包含 length 属性的类型。你能告诉我们你定义columns变量的部分吗？

如果是这样，您可以使用Array.from(columns); 将其转换为数组。

【讨论】：