React_on_rails: IE 11 fails with SCRIPT1003: Expected ':'

[hoenth]

When loading React components into a rails app using ReactOnRails, the components fail to load on IE 11 and the following error is displayed:
SCRIPT1003: Expected ':'

The error points to the comma after the 'e' character in the compiled code:

...catch(e){h!=0,p=(0, 1.default)({e,name:t,serverSide:!0}....

I have tracked this down to the serverRenderReactComponent that has the following code:

} catch (e) {
  hasErrors = true;
  htmlResult = handleError({
    e,
    name,
    serverSide: true,
  });
}

According to this article: https://stackoverflow.com/questions/46776046/script1003-expected-in-ie-11-only, IE11 requires the keys to be included when instatiating an object, as follows:

} catch (e) {
  hasErrors = true;
  htmlResult = handleError({
    e: e,
    name: name,
    serverSide: true,
  });
}

This is how handleError is called in the react_on_rails_helper.rb file.

It also only seems to be an error once the code is minified, as I was not able to reproduce the error locally running in development.

I have forked the repo and attempted to make this change, however, i can't seem to get my code to pick up that change. It continues to reference the serverRenderReactComponent as if I had made no changes, though I have verified that my application is using our forked version of the gem, and that the gem on the server is our version, and contains the above change to include the keys in the object definition.

Your thoughts are greatly appreciated.

[hoenth]

I attempted to reproduce the error locally in the spec/dummy app, but could not.

Taking a look at the code that gets generated, the function in question does correctly have the keys

} catch (e) {
  hasErrors = true;
  htmlResult = (0, _handleError2.default)({
    e: e,
    name: name,
    serverSide: true
  });
}

However, once minified on the server, we get the following:

} catch (e) {
    h = !0,
    p = (0,
    l.default)({
        e,
        name: t,
        serverSide: !0
    })
}

[justin808]

Ie cannot handle the object shorthand notation.

[hoenth]

Yes. But I am not clear on why compressing/uglifying the JS is converting key/value pairs, which appear in the uncompressed versions (on the server in the node_modules folder) and when running locally, to the short-hand.

[hoenth]

It turns out that this was caused by a change with webpacker and UglifyJS. Previously, UglifyJS was configured to return ECMA 5 level code, but that was changed to 8 (https://github.com/rails/webpacker/issues/1235). IE 11 requires 5.

To fix this, we added the following statement to our config/webpacker/production.js file:

environment.plugins.get("UglifyJs").options.uglifyOptions.ecma = 5

So this is not an issue with ReactOnRails...closing