Issue with IE11

[larsvankleef]

With a customer i was testing a application that was build with this tool. On his machine windows 10 with IE11 he got this blank page. Where there was notting showing except the error in the image below. When i wanted to recreate this issue it wasn't possible so is switched to IE10/WIN7 where i found the same issue.

Later when is switched back in browser-stack the IE11 on windows 10 version was working fine. Even with real machine IE11/WIN7 could not figure out why he did get this error. After that i added this polyfilll cdn(https://polyfill.io/v2/docs/) what generated the following error in IE10/WIN7

Later i found this. but i don't see how i can add these to the correct location: https://reactjs.org/docs/javascript-environment-requirements.html

I found these things this may can help:

• IE10 react-dom exist Error facebook/react#10958
• 'Set' is undefined in IE 11 document mode 10 wmonk/create-react-app-typescript#169

[EECOLOR]

Did you add the following?

<script defer crossOrigin='anonymous' src='https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es2015,es2016,es2017' />

[larsvankleef]

Yes i have added that line of code to my head of the page component. At that moment i got this error in IE10/WIN8:

SCRIPT5007: Unable to get property 'props' of undefined or null reference 

When i jump in to the code i see this:

var elements = document.querySelectorAll('*[data-componentid="domain_floepfloep_js"]');
for (var i = 0; i < elements.length; i++) {
  var props = JSON.parse(elements[i].dataset.props);
  Object(react_dom__WEBPACK_IMPORTED_MODULE_1__["hydrate"])(React.createElement(_floepfloep_js__WEBPACK_IMPORTED_MODULE_0__["default"], props), elements[i]);
}

it looks like react is trying to get the data element of a html element. When i run the code in the console i got a undefined out of this elements[i].dataset operation.

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
• https://stackoverflow.com/questions/7127896/problem-using-elem-dataset-with-ie-and-jsfiddle
• https://caniuse.com/#search=dataset

Conclusion

Looks like this is more a browser issue then a build tool issue.

[EECOLOR]

Hmm, that's our code: https://github.com/kaliberjs/build/blob/master/library/webpack-loaders/react-universal-client-loader.js#L18

This might very well be a bug. Are you passing any props to your universal component?

If not, then it's a bug in our code. I haven't checked the specification, but I can imagine the dataset object not being present if there are no data attributes.

Could you try adding a prop to your app (<App myProp='test' />) and see if that is a workaround for your problem?

[klaasman]

IE10 has no support for data-attributes and the dataset-property, so that's another issue.

[klaasman]

I don't think we have plans on supporting IE10. However you could try to add the dataset-feature to the polyfill-request:

<script
  defer
  crossOrigin='anonymous' 
  src='https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es2015,es2016,es2017,dataset'
/>
 

[larsvankleef]

It wasn't a issue with the build tool. The client was using IE11 in a compatibility mode so he was testing in IE10 that isn't supported.

This may can help if this issue comes up: https://www.faa.gov/airports/airport_safety/wildlife/media/Internet-Explorer-11-workaround.pdf