[Q] "Invalid range in character set" error on IE11

💬 Questions and Help

I setup exceljs, in my React/TypeScript project, following the es5 imports section and now I’m getting a “Invalid range in character set” error in IE11. I don’t have any issues in Chrome or firefox.

I setup a simple codesandbox here https://codesandbox.io/s/elegant-sinoussi-m6ml0?file=/src/index.js. The code below, is what I’m actually using in my app.

In my index.tsx file I have

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'core-js/modules/es.promise';
import 'core-js/modules/es.object.assign';
import 'core-js/modules/es.object.keys';
import 'regenerator-runtime/runtime';
// @ts-ignore
import rewritePattern from 'regexpu-core';
// @ts-ignore
import { generateRegexpuOptions } from '@babel/helper-create-regexp-features-plugin/lib/util';
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
// components
import App from 'components/App';

const { RegExp } = global as any;
try {
  new RegExp('a', 'u');
} catch (err) {
  // @ts-ignore
  global.RegExp = function (pattern: any, flags: any) {
    if (flags && flags.includes('u')) {
      return new RegExp(
        rewritePattern(
          pattern,
          flags,
          generateRegexpuOptions({ flags, pattern }),
        ),
      );
    }
    return new RegExp(pattern, flags);
  };
  // @ts-ignore
  global.RegExp.prototype = RegExp;
}

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

In the component that I’m using exceljs, I have.

/** @jsx jsx */

import { jsx, css } from '@emotion/core';
// @ts-ignore
import exceljs from 'exceljs/dist/es5/exceljs.browser';
import { saveAs } from 'file-saver';

// --- components (LabelValue) ---
// --- styles (Calculate) ---
const panelContainer = css`
  padding: 20px;
`;

// --- components (CalculateResults) ---
function CalculateResults() {
  async function downloadResults() {
    const workbook = new exceljs.Workbook();
    const worksheet = workbook.addWorksheet('sheet 1');
    worksheet.addRow(['a', 'b', 'c']);

    // download the file
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer]);
    if (navigator.msSaveBlob) {
      navigator.msSaveBlob(blob, 'abc.xlsx');
    } else {
      saveAs(blob, 'abc.xlsx');
    }
  }

  return (
    <div css={panelContainer}>
      <button onClick={() => downloadResults()}>Download</button>
    </div>
  );
}

export default CalculateResults;

[ahilangopal]

Yes, for IE11 you’ll need to teach IE about modern regex, like outlined here: https://github.com/exceljs/exceljs#es5-imports Let us know if that doesn’t work!

How do I, teach IE about modern regex in Angular 9 application

[ashishsharma229]

Hi @alubbe, i have the same question that @ahilangopal asked. How to get support of modern regex in angular 9 applications for IE11?