I vent into internet options and enabled scripting. I even added local host as a trusted site and every time the site render I see:
"root" is empty.
My app works in all other browsers but IE11.
What do I need to do to get this working?
EDIT:
Console is empty:
internet options:
This turned out to be something already know but in my scenario it was hard to figure out since no errors were present.
Something that was weird for me was even though the react part never rendered still my css got imported to the browser. I removed the css and once the site reloaded i got an error saying
"Object doesn't support property or method 'assign"
Soloution:
Added the following script just before the dist bundle got rendered
<script>
if (typeof Object.assign != 'function') {
Object.assign = function(target) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
};
}
</script>
Found the answer here
Keeping the question and answer since the same error occured here (as in link above) but in a diffirent scenario, hopefully can guide others.
When targeting old browsers, you should always make sure you have the right polyfills.
You can follow React's official advice: https://create-react-app.dev/docs/supported-browsers-features
And use the official react-app-polyfill package.
This steps will make sure you won't run into random compatibility issues.
