Material-ui: Unable to get property 'root' of undefined or null reference

[majid-amiri]

When I run the app in IE11 I get the error Unable to get property 'root' of undefined or null reference and the app fails to load. In Chrome and Safari it's running normally.
This is where almost all errors take care:

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The app fails to load and throws an error Unable to get property 'root' of undefined or null reference for almost all components. It's working well on Chrome and Safari, but the problem is on IE11.

Expected Behavior 🤔

The app should load and render components.

Steps to Reproduce 🕹

Steps:

1. Create a react app and add some Mui components to it.
2. Run the app on IE.

Context 🔦

I'm trying to come up with a solution to get rid of this error and run my app normally.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.4.3 |
| React | v16.8.6 |
| Browser | IE11 |

[oliviertassinari]

@majid-amiri Do you have a reproduction we can look at?

[oliviertassinari]

The issue has been closed because it does not conform to our issue requirements.
Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[lopatnov]

Hi @oliviertassinari
I've reproduced there: https://github.com/HR-tools/About. Could you look at?
Live example: https://hr-tools.github.io/About/

[lopatnov]

I think the problem is in polyfills like
import 'core-js/es/object';

[jpodpro]

i can confirm this problem with ie11 also. as soon as i include the object polyfill then i get the same errors in various places. the ie11 debugger seems to consistently point to an odd source: node_modules/@material-ui/core/esm/Breadcrumbs/Breadcrumbs.js:71, though it would point to other strange places at different times so i don't expect that to be helpful.

import 'core-js/es/object';
import React from 'react';
import { Button } from '@material-ui/core';

function App() {
  return (
    <div className="App">
      <Button variant="contained">butt in</Button>
    </div>
  );
}

export default App;

here's a codesandbox but it's kinda useless since ie11 doesn't seem to work on codesandbox.
https://codesandbox.io/s/bold-shape-lnx2y

[jpodpro]

fyi including the script below in public/index.html instead of importing any polyfills works perfectly for me.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

[Gcampes]

Any news on this?
I have a similar issue on a ssr setup of material-ui.

As soon as the server side rendered is removed from the page I get this error, and the styling goes completely crazy.
https://material-ui.com/guides/server-rendering/

We are also using Polyfills from core-js

```javascript
React.useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);

[NMinhNguyen]

here's a codesandbox but it's kinda useless since ie11 doesn't seem to work on codesandbox.
codesandbox.io/s/bold-shape-lnx2y

@jpodpro I exported the source code as a zip, ran it locally, and I cannot reproduce this error. You may want to consider adding ie 11 to the browserslist config: https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers

[oliviertassinari]

Should we close the issue a coming from an external dependency? (related to wrong polyfilling)

[NMinhNguyen]

I’m happy to spend some time investigating this if a repro can be provided (preferably with a lockfile to ensure an exact repro), but otherwise can probably close.

[oliviertassinari]

Awesome, let's wait till next Monday.

[jpodpro]

@NMinhNguyen i have ie11 in my browserslist config. i'm not sure if it's an ie11 version-specific thing but both me and my coworker were having this same problem as soon as core object is imported.

i'm not sure if mui is meant to work with core-js but it doesn't for me and others. and obviously the babel core polyfill works differently than the core-js polyfill. some of my research seemed to indicate it could have to do with webpack transpiling node_modules but i didn't end up having to chase that down. at any rate, we are happy with the solution we have.

[NMinhNguyen]

@jpodpro FWIW when I used the latest CRA (3.3.1), I also had issues in dev mode (but not this exact issue), but downgrading to 3.2.0 per https://github.com/facebook/create-react-app/issues/8197#issuecomment-566972438 made the CodeSandbox project work (even with core-js/es/object - btw core-js is what Babel actually uses).

[oliviertassinari]

I have tried the reproduction provided in https://github.com/mui-org/material-ui/issues/17789#issuecomment-567647432 without any luck in dev & prod mode on IE11. So it confirms @NMinhNguyen feedback.

Closing for the lack of a reproduction.

[MidnightDesign]

For anyone who stumbles upon this in the future: I've managed to fix the problem by explicitly _including_ core-js/es/object in my Webpack's entry array.

[rotimi-babalola]

For anyone who stumbles upon this in the future: I've managed to fix the problem by explicitly _including_ core-js/es/object in my Webpack's entry array.

This worked for me. Thanks! @MidnightDesign

[yamresh]

facing the same issue while using date picker

[adam-thomas-privitar]

@yamresh Me too, did you find a solution?

[david-mart]

@adam-thomas-privitar this solution seemed to work for me. I didn't have to include anything in js

fyi including the script below in public/index.html instead of importing any polyfills works perfectly for me.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>