ReactJs “Object doesn't support property or method 'find'” in IE11 with Babel and Webpack

I'm getting some strange behavior in IE11 with use of Webpack and Babel. Currently, the issue is occurring is the following error message:

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

This only occurs in Internet Explorer, and strangely enough doesn't occur when running the code locally, only when it has been published.

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

Through the use of breakpoints, I can see that the code calls columns.find with an empty array 3 times, before it is passed an array of Objects. It is only on that 4th time that the error is thrown. In the IE console, I can run the following lines of code inside the above function to try to isolate the issue further.

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'

All very strange to me.

Below is my webpack.config file, incase that helps.

/// <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']
                  }
        },
      ]
  },  
}

Thanks in advance for any help or input.

Answer:1



I'm using the FormInput element from React Native Elements, which seems to produce a line underneath each FormInput component. One is more faint than the other. Form looks as follows <View style={...

I'm using the FormInput element from React Native Elements, which seems to produce a line underneath each FormInput component. One is more faint than the other. Form looks as follows <View style={...

I worked on my client and server side code separately. I now managed to get them both working simultaneously in the same project but i dont know how to makethe two work together. I am using javascript/...

I worked on my client and server side code separately. I now managed to get them both working simultaneously in the same project but i dont know how to makethe two work together. I am using javascript/...