[docs] Update to React 18

[mnajdova]

https://deploy-preview-33196--material-ui.netlify.app/

Things to be resolved before this gets merged:

• Resolve the issue in next.config.js see [docs] Update to React 18 #33196 (comment) and the commit ef4191a
• Update some types in @mui/base so that they are compatible with React 18 [base] Improve some types #33270
• Check the components using ResizeObserver. There are two known problems at this moment: flushSync needs to be invoked in the handler, otherwise there are flickerings happening & the refs can be nullable on the last run of the resize observer if they are being replaced by Suspense.
  • Masonry [Masonry] Fix flickering when used with React 18 #33163
  • TextareaAutosize [TextareaAutosize] Fix warnings for too many renders in React 18 #33253, [TextareaAutosize] Fix crash when used with React 18 & Suspense #33238
  • Tabs [Tabs] Components crashed when used with React 18 & Suspense #33276 (Couldn't reproduce the flickering with this component yet, so I haven't made any updates related to it. I would rather wait for a bug to see the actual problem before doing any changes, because as indicated in the reactjs' docs it could hurt performance).

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: -0.02% 😍, gzip: -0.09% 😍
@material-ui/lab: parsed: -0.03% 😍, gzip: -0.15% 😍
@material-ui/styles: parsed: -0.18% 😍, gzip: -0.89% 😍
@material-ui/system: parsed: -0.13% 😍, gzip: -0.56% 😍
@material-ui/unstyled: parsed: -0.09% 😍, gzip: -0.33% 😍
@material-ui/utils: parsed: -1.46% 😍, gzip: -3.21% 😍
@mui/material-next: parsed: -0.08% 😍, gzip: -0.34% 😍
@mui/joy: parsed: -0.04% 😍, gzip: -0.23% 😍

Generated by 🚫 dangerJS against d2daad5

[oliviertassinari]

cc @Janpot

[Janpot]

🤔 Intuitively I'd say all we need to do is spread externals in our wrapper array. We are after all just wrapping the first element. But that may be too naive.

      const [nextExternals, ...externals] = config.externals;

      config.externals = [
        (ctx, callback) => {
          const { request } = ctx;
          const hasDependencyOnRepoPackages = [
            'notistack',
            '@mui/x-data-grid',
            '@mui/x-data-grid-pro',
            '@mui/x-date-pickers',
            '@mui/x-date-pickers-pro',
            '@mui/x-data-grid-generator',
            '@mui/x-license-pro',
          ].some((dep) => request.startsWith(dep));

          if (hasDependencyOnRepoPackages) {
            return callback(null);
          }
          return nextExternals(ctx, callback);
        },
        ...externals,
      ];

[mnajdova]

🤔 Intuitively I'd say all we need to do is spread externals in our wrapper array. We are after all just wrapping the first element. But that may be too naive.

I thought the same, but I am not even sure how to verify that everything works as I don’t know where they come from.

[oliviertassinari]

I could help test that it works correctly.

Otherwise, It might be good to split the React 18 PRs into multiple chunks. For instance, I see a couple of TypeScript fixes that seem good to take regardless of React 18.

[mnajdova]

Makes sense, will start splitting up the PR into smaller chunks

[Janpot]

Looks like this externals configuration is specifically for compiling their new edge runtime, which gets enabled when you use React 18. See https://nextjs.org/docs/advanced-features/react-18/switchable-runtime

As far as I understand, no code in the docs will currently be compiled using this webpack config, so we should be safe here. The code gets run only because the edge runtime compiler gets created. Maybe we could force the nodejs runtime globally, just to be on the safe side.

[mnajdova]

I noticed that there is one flaky test, it is failing on every second build almost - https://app.circleci.com/pipelines/github/mui/material-ui/75495/workflows/8cd4c2d0-286a-4d39-ab34-6db7dbc51188/jobs/400207

[siriwatknp]

@mnajdova Please check the Slide test fix 4596433.

[siriwatknp]

👍 LGTM

[Janpot]

nice

[mnajdova]

Sorry for the misleading comment, the fix in mui/mui-x#5414 was enough. I had some local cache that messed up the build. I will wait for the new version of @mui/x-data-grid and will merge this one. Thanks a lot to everyone who helped with the effort :)

[mnajdova]

I am merging this, if we find new issues I will resolve them separately.

[oliviertassinari]

if we find new issues I will resolve them separately.

@mnajdova I have found one. I noticed it on Toolpad, then tried to find the root cause, landing here. I could pinpoint this change to an ocean of warnings in the docs 😁.

I guess it's impacting developers with this demo too https://github.com/mui/material-ui/blob/master/examples/nextjs/src/Link.js.

[Janpot]

@mnajdova Found another one while debugging in Netlify, the yarn workspace docs export now spawns a bunch of warnings around the usage of getInitialProps:

warn  - Detected getInitialProps on page '/base/api/badge-unstyled'while running "next export". It's recommended to use getStaticPropswhich has a more correct behavior for static exporting.
Read more: https://nextjs.org/docs/messages/get-initial-props-export

[oliviertassinari]

Another regression: the scroll restoration is broken on my end (it's annoying):

• It works on v5.8.7 https://62c35000f3955c000870e453--material-ui-docs.netlify.app/
• but doesn't work on this PR: https://deploy-preview-33196--material-ui.netlify.app/.

I think that it's a regression inside Next.js itself, moving from 12.1.5 to 12.2.0: vercel/next.js#37893.

[mnajdova]

I will try to look into these by the end of the week. If I don't find time I will ask someone in the team to look into them.