New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Update to React 18 #33196
[docs] Update to React 18 #33196
Conversation
@material-ui/core: parsed: -0.02% 😍, gzip: -0.09% 😍 |
cc @Janpot |
🤔 Intuitively I'd say all we need to do is spread 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,
]; |
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. |
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. |
Makes sense, will start splitting up the PR into smaller chunks |
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 |
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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 LGTM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice
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 :) |
I am merging this, if we find new issues I will resolve them separately. |
@@ -92,19 +92,19 @@ | |||
"lz-string": "^1.4.4", | |||
"markdown-to-jsx": "^7.1.7", | |||
"material-ui-popup-state": "^2.0.1", | |||
"next": "12.1.5", | |||
"next": "12.2.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
https://deploy-preview-33196--material-ui.netlify.app/
Things to be resolved before this gets merged:
next.config.js
see [docs] Update to React 18 #33196 (comment) and the commit ef4191aResizeObserver
. 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 bySuspense
.