This is a follow up to an earlier post about getting JavaScript libraries to work in IE. In this case, a React component wrapped in a Drupal module was not loading in IE. It turned out to be an issue of missing ES6 features.

Here is what the console was showing:

Object doesn't support property or method 'includes'

I first tried implementing a polyfill from MDN. However, IE threw an error about another missing “property or method” (endsWith). I figured this was going to be another dependency hell, so I started looking for a better solution. I found a reference to a polyfill cdn, which sounded like a better alternative. Sure enough, it worked when I added the following to the Drupal module’s .libraries.yml file:

ourlibrary:
  js:
    https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes: { type: external, minified: true }

However, this is only a good solution if we plan to always test the React app within Drupal. If we want to load the app outside of Drupal (which is faster for development), we need a more “nuclear” solution.

I came across a project called react-app-polyfill. But it didn’t seem to work for my use-case, which I tried by adding the following to the App.js:

import 'react-app-polyfill/ie11';

The best solution I’ve found so far is using core-js. I just added the following to lines and I was home free:

import 'core-js/es6/string';
import 'core-js/fn/array/includes';

Resources