[docs] Investigate IE 11 crash

[eps1lon]

Investigating #14774

git bisect good ba4332d00a5f951cfc33dcffa5924cc7999b8f05
# first bad commit: [440c9f6320d669319b5a3524b2705d73e795e698] [core] Upgrade dependencies and devDependencies (#14493)

440c9f6 regenerated the whole lockfile. Might be just next might be some other dependency. Might be a good idea to branch of ba4332d and increment by canaries instead of majors.

Already spent a couple of hours on this issue. Working with next.js is pretty frustrating so I'll doubt I spend much more time on the issue. Maybe it will fix itself someday.

No idea why netlify is crashing. It's working locally.

[eps1lon]

This should've been there in the first place: https://reactjs.org/docs/javascript-environment-requirements.html

[eps1lon]

Following https://github.com/zeit/next.js/blob/9c4eefcdbf4058b65c8b88fe98387166acad127b/examples/with-polyfills/next.config.js

[mui-pr-bot]

Details of bundle changes.

Comparing: 10438a1...9ebd2a2

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	0.00%	0.00%	357,579	357,579	91,073	91,073
@material-ui/core/Paper	0.00%	0.00%	68,634	68,634	19,979	19,979
@material-ui/core/Paper.esm	0.00%	0.00%	62,366	62,366	19,060	19,060
@material-ui/core/Popper	0.00%	0.00%	30,454	30,454	10,525	10,525
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	17,390	17,390	5,730	5,730
@material-ui/core/useMediaQuery	0.00%	0.00%	2,471	2,471	1,042	1,042
@material-ui/lab	0.00%	0.00%	152,165	152,165	44,548	44,548
@material-ui/styles	0.00%	0.00%	53,839	53,839	15,566	15,566
@material-ui/system	0.00%	0.00%	17,143	17,143	4,522	4,522
Button	0.00%	0.00%	90,924	90,924	26,941	26,941
Modal	0.00%	0.00%	84,711	84,711	25,208	25,208
colorManipulator	0.00%	0.00%	3,234	3,234	1,301	1,301
docs.landing	0.00%	0.00%	51,843	51,843	11,349	11,349
docs.main	-2.48%	-3.26%	649,999	633,876	201,578	195,014
packages/material-ui/build/umd/material-ui.production.min.js	0.00%	0.00%	305,844	305,844	83,862	83,862

Generated by 🚫 dangerJS against 9ebd2a2

[eps1lon]

This created a different environment depending on the bundle. You can verify this by adding a Symbol polyfill. React elements will have sometimes types that are numbers, sometimes Symbols depending on the time and place they were created.

[oliviertassinari]

I have looked deeper into the problem. I believe that we just have to wait for the release of cssinjs/jss#1065.

I have found the following reproduction:
🔴 KO

import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles({
  root: {
    flex: '1 0 100%',
  },
});

const B = () => {
  useStyles();
  return <div>wtf</div>;
};

export default () => <B />;

✳ OK

import 'docs/src/modules/components/bootstrap';
// --- Post bootstrap -----
import React from 'react';
import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles({
  root: {
//    flex: '1 0 100%',
  },
});

const B = () => {
  useStyles();
  return <div>wtf</div>;
};

export default () => <B />;

[eps1lon]

Have you tried building this branch locally or any other idea why netlify is failing?

I guess we should at least add the Map/Set polyfills. I just recently encountered an issue with the codesandbox-client. IE11 essentially has a non-spec compliant implementation where someMap.set().set() is failing because they return undefined from Map.prototype.set.

I remember that we also had some issues where we had to remove new Set([iterable]).

[oliviertassinari]

@eps1lon I haven't tried this pull request. My workflow was: remove all the pages from /pages at the exception of index.js (to get a fast test iteration cycle, ~1min). Do a dichotomy to find the source of the problem. The minimal changes required to make the page work was: 1. mount a simple div, 2. remove the style rules body.

[oliviertassinari]

Using the IE 11 debugger is tricky. I had to pause on all the exception. There are quite a few exceptions thrown by feature detection logic that should be ignored. The first meaninfuly error reported is the JSS startWith issue.

[eps1lon]

Using the IE 11 debugger is tricky. I had to pause on all the exception. There are quite a few exceptions thrown by feature detection logic that should be ignored. The first meaninfuly error reported is the JSS startWith issue.

I feel you. I wish we could disable next.js error pages so that we could actually catch the exception and not just a logged error from componentDidCatch.

But your debug approach was a bit different. While jss might be a issue it was not the original issue. The major version upgrade of next.js was the first one to introduce a change. I never saw an error in IE11 related to startsWith on that commit.

Does the full site work with all flex usages removed?

[oliviertassinari]

Do you want to keep pushing in this pull request's direction? Upgrading JSS fixes the IE 11 crash of the documentation: #15034.

[eps1lon]

We can close. I'll keep an eye on the polyfill issue that's not working in netlify. The broken Map/Set polyfill might cause trouble in the future.

[oliviertassinari]

Yes, it has already caused trouble in the past, at least for me in Apollo core with IE 11.