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:
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
- Use indexOf instead of includes
- Use the polyfill
1. Use indexOf instead of includes
You can use widely supported indexOf() after converting the property to string using toString():
1 | [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:1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // 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")); |
