Error with IE11 - SCRIPT1002: Syntax error - class FocusTrap

[isaacs-gh]

Hi,
I am using react-hotkeys v1.1.1 in my create-react-app and when trying to load in IE11 an error (SCRIPT1002: Syntax error) is thrown in bundle.js on this line:
class FocusTrap extends __WEBPACK_IMPORTED_MODULE_1_react__["Component"] {

This is only when loading in development mode, it doesn't appear to be an issue with the production optimised build.

Is there any way to resolve this issue? (Apologies if this is a trivial fix, I'm quite new to the JS/React scene)

Thanks.

[greena13]

Hey @isaac-ipl, thanks for reporting this.

The production bundle is built with rollup.js, so it handles the modules syntax itself, where as Babel handles the modules in the development builds. That is why you are seeing the difference in behaviour in the two builds (thank you for investigating further - that is very helpful information).

Are you consuming react-hotkeys as a CommonJs module (through npm install) or as a UMD module (using the CDN)?

[isaacs-gh]

Hi @greena13 thanks for the prompt reply, that's good info to know. I am using the CommonJs module (installed via npm).

[greena13]

Ok, so I think the issue at the moment is that for some reason your Webpack configuration is using the ES6 module instead of the CommonJS modules in development.

The way the package is intended to be consumed is the index.js file is used as the entry point for configurations that support ES5 (as defined by the main attribute in the package.json) and systems set up to support ES6 use the index.es.js file as an entry point (as pointed to by the module attribute of the package.json).

It's very possible I have misunderstood the standard or Webpack's behaviour somewhere along the line, and what I think is happening, is not.

I unfortunately have to head into the office now, but where I will start my investigation when I get time (and you can to if you want to progress this further in the meantime) will be to examine the webpack development configuration for create-react-app and see if I can figure out why it seems to be using the wrong version of react-hotkeys.

[greena13]

Just an update: reading through this long discussion I think I may have misunderstood the role of the module attribute in package.json and that the code should still be transpiled (removing the class syntax that is causing you issues) but keep the module syntax.

I'll re-read tomorrow to check my interpretation and hopefully have a fix in the next few days.

[greena13]

@isaac-ipl, I think I've fixed it. Could you please try version 1.1.3?