Material-ui: [Grid] IE 11 support

[qrusadorz]

If you include the Grid component, an error occurs in URL search of Google search console.
This problem does not occur at least on Chrome and Edge.
As there is no complaint from the user, it will not occur in Safari, too.

Problems began to occur in May.
Until then, screenshots were displayed in the Google Search Console.
I think that the change of Google Crawler is affecting.
Even my code needed to be corrected in two places.

As I am not good at English, I write with the help of translation.

• [x] This is not a v0.x issue.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

A screen shot will be displayed.

Current Behavior 😯

Screen shots are not displayed.
Console error message:
TypeError: undefined is not a function

Steps to Reproduce 🕹

Link:

1. Create a component that contains a Grid component.
   (ex. return (<Grid></Grid>);)
2. npm run build
3. Deploy in an environment accessible by Google Search Console.
4. Run a live test of URL inspection from Google Search Console.

Context 🔦

I'm expecting the crawler to understand the page correctly.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.0.0 |
| React | v16.8.6 |
| Browser | Google Search Console |
| TypeScript | |
| react-router-dom | v5.0.0 |
| react-scripts | v3.0.1 |

[oliviertassinari]

We need more information, this is not actionable for us. We will have to close the issue without.

[oliviertassinari]

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!

[qrusadorz]

I want to provide simple code.
Verification in the production domain may take up to 24 hours.
I will contact you again when I'm ready.
Thank you for the advice.

[qrusadorz]

@oliviertassinari I prepared a complete reproduction test case.
This repository based on the codesandbox.io template.
I believe the problem is very easy to reproduce.
As a precaution, I have also committed the build folder and the stack trace log.

Repository

[qrusadorz]

I fixed three code that didn't matter in April.
I thought that it might be a hint, so I will post it.
The contents of the correction are as follows.

case 1.

// for (const node of document.head.childNodes) { // Error
for (let i = 0; i < document.head.childNodes.length; i++) { // OK
  const node = document.head.childNodes[i];
}

case 2.

getGrouppathToIndex: (groups, grouppath) => {
  if (!grouppath) return 0; // It became OK after adding this
  // when grouppath is undefined, occurs "undefined is not a function".
  const index = groups.findIndex(group => group.path.toLowerCase() === grouppath);
  return Math.max(index, 0);
},

case 3.

export default function ItemDetail(props) {
  const { items = [] } = useContext(ItemsContext);
  const { id } = props.match.params;
  // const item = items.find(item => item.id === id); // when items is [], occurs "undefined is not a function".
  const item = items.length ? items.find(item => item.id === id) : null;  // OK
  // ...

[oliviertassinari]

I highly suspect that the issue is correlated to #15833. If I try to load https://qrcodemk.firebaseapp.com/ with Chrome 41, it fails to render on the Symbol. I'm closing the issue. Please try again with v4.0.1. If it's still broken and you are able to provide more detail, like what the actual error is, we will be able to handle.

[qrusadorz]

I confirmed that v4.0.1 is still broken.
But I do not have the information to solve the problem.
I leave information for those who have encountered the same problem.

1. I confirmed that there is no problem in v4.0.0-beta.1, there is problem in v4.0.0-beta.2.
2. If component's render () is not called, there is a problem with router.
   OK:<Route path="/" render={(props) => <Some {...{...props, myprop}}/> /> NG: <Route path="/" render={(props) => <Some {...props} myprop={myprop}/> />
3. The new evergreen Googlebot

Google Crawler may be fixed eventually.
If you are in a hurry to make corrections, you may need to consider safe coding.

[oliviertassinari]

@qrusadorz Thank you for trying it out. The problem is in this line:
https://github.com/mui-org/material-ui/blob/8cfaa9880ad59b8c11121ce507dacad54aba13ce/packages/material-ui/src/Grid/Grid.js#L61

It was transpiled in beta.1 but it's not longer in beta.2 (and in v4.0.1).

I think that we should add Object.assign back as it's not supported by IE 11 or rewrite the source to move away from Object.assign. No matter what, we have an issue with the end-to-end tests. The problem wasn't detected. What do you think @eps1lon?

[eps1lon]

I specifically checked if Object.assign was supported in IE 11. Either I looked in the wrong spot or mdn updated their table (I learned later that mdn isn't reliable concerning support tables). If that is the case we definitely need to revert that change.

Edit: Yep https://github.com/mdn/browser-compat-data/pull/4029. Though it seems I was not the only one.

[qrusadorz]

I confirmed that it was improved in v 4.0.2.
I used Google's Mobile-Friendly Test Site.
Thank you very much.