Material-UI and React IE11 compatibility - reactjs

Question

I'm trying to implement material-ui in my React application. Unfortunately we still have to support IE, but anything material-ui I try to add makes the app not display, and with loads of undefined errors in the console. For example, I'm trying to add the Tabs component code directly from material-ui's site (using v4.8.3):
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tabs from '#material-ui/core/Tabs';
import Tab from '#material-ui/core/Tab';
import Typography from '#material-ui/core/Typography';
import Box from '#material-ui/core/Box';
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
id={`nav-tabpanel-${index}`}
aria-labelledby={`nav-tab-${index}`}
{...other}
>
{value === index && <Box p={3}>{children}</Box>}
</Typography>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `nav-tab-${index}`,
'aria-controls': `nav-tabpanel-${index}`,
};
}
function LinkTab(props) {
return (
<Tab
component="a"
onClick={event => {
event.preventDefault();
}}
{...props}
/>
);
}
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
export default function Header() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs
variant="fullWidth"
value={value}
onChange={handleChange}
aria-label="nav tabs example"
>
<LinkTab label="Page One" href="/drafts" {...a11yProps(0)} />
<LinkTab label="Page Two" href="/trash" {...a11yProps(1)} />
<LinkTab label="Page Three" href="/spam" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Page One
</TabPanel>
<TabPanel value={value} index={1}>
Page Two
</TabPanel>
<TabPanel value={value} index={2}>
Page Three
</TabPanel>
</div>
);
}
but all I get in IE is many of these:
Is there something I am missing here? Any polyfills I need to add? Chrome displays just fine with no errors. Any help is much appreciated.

Answer 1

From the Supported Platform of Material-UI, it says it also supports Internet Explorer 11. You don't need to provide any JavaScript polyfill as it manages unsupported browser features internally and in isolation.
I made a demo using Tab component and the code you providing, it works well in IE 11. Maybe the error occurs in other codes and you could check again where the error points to. Besides, have you had the right package.json? I use package.json like below:
{
"title": "Material demo",
"devDependencies": {
"react-scripts": "latest"
},
"description": "https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/tabs/SimpleTabs.js",
"dependencies": {
"#material-ui/core": "latest",
"#types/react": "^16.8.6",
"prop-types": "latest",
"react": "latest",
"react-dom": "latest"
}
}
You could refer to my online demo. If the issue still persists, you could provide a reproducible demo using online code editor like StackBiltz. I think that will help us have a better understanding of the issue and see how to help.