Object doesn't support property or method ‘includes’ in IE

Today we will show you how to fix the error Object doesn't support property or method ‘includes’ generated in IE during the react development.

Object doesn't support property or method ‘includes’ in IE react, includes() not working in all browsers, IE 11 issue - .includes() is not supported, IE11: Object doesn't support property or method 'includes', Alternative of .includes() in Internet Explorer, Crash in IE11 for javascript usage of "includes".

Checkout more articles on React JS:

• url-parameters-with-react-router/" title="URL Parameters with React Router">URL Parameters with React Router
• Handle Events in React
• api-calls-react-hooks/" title="API calls with React Hooks">API calls with React Hooks

If you look at the documentation of includes(), most of the browsers don't support this property.

Way to Fixed the error: Object doesn't support property or method ‘includes’ in IE

1. Use indexOf instead of includes
2. Use the polyfill

1. Use indexOf instead of includes

You can use widely supported indexOf() after converting the property to string using toString():

[1,2,3,4,5].indexOf(2) > -1

2. Use the polyfill

You can also use the polyfill from MDN. Add below script on top of the all imports and it will work.

Solution 1:

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }

    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}

In alternative way you can use below script as well.

Solution 2:

if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function (searchElement, fromIndex) {

      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        if (sameValueZero(o[k], searchElement)) {
          return true;
        }
        // c. Increase k by 1.
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}

Output:

I have created a new file as "polyfill.js" and added above script to load React Application in IE. Your react application's index.js page should look like below.

index.js

// add all script inside the polyfill file
import './polyfill.js';

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  componentDidMount() {
    const user = "This is test react application.";
    this.setState({
      name: user.includes("react") ? "React Application" : " Application"
    });
  }

  render() {
    return (
      <div>
        <b>Hello {this.state.name}</b>
        <p>Start editing to see some magic happen :)</p>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));