Skip to content
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.

Sign up for GitHub

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] Use reactStrictMode over custom switch #20522

Merged
merged 2 commits into from
Apr 12, 2020
Merged

[docs] Use reactStrictMode over custom switch #20522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
63ebceb
[docs] Use reactStrictMode over custom switch
eps1lon Apr 9, 2020
6a58227
revert: Use stable legacy mode
eps1lon Apr 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions docs/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,17 @@ const { LANGUAGES, LANGUAGES_SSR } = require('./src/modules/constants');
const workspaceRoot = path.join(__dirname, '../');

/**
* @type {'legacy' | 'sync' | 'concurrent'}
* https://github.com/zeit/next.js/blob/287961ed9142a53f8e9a23bafb2f31257339ea98/packages/next/next-server/server/config.ts#L10
* @typedef {'legacy' | 'blocking' | 'concurrent'} ReactRenderMode
* legacy - ReactDOM.render(<App />)
* legacy-strict - ReactDOM.render(<React.StrictMode><App /></React.StrictMode>, Element)
* blocking - ReactDOM.createSyncRoot(Element).render(<App />)
* concurrent - ReactDOM.createRoot(Element).render(<App />)
* @type {ReactRenderMode | 'legacy-strict'}
*/
const reactMode = 'legacy';
// eslint-disable-next-line no-console
console.log(`Using React '${reactMode}' mode.`);

module.exports = {
typescript: {
Expand Down Expand Up @@ -45,10 +53,6 @@ module.exports = {
config.resolve.alias['react-dom$'] = 'react-dom/profiling';
config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';

if (reactMode !== 'legacy') {
config.resolve.alias['react-transition-group'] = '@material-ui/react-transition-group';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That doesn't do anything in the current state.

}

// next includes node_modules in webpack externals. Some of those have dependencies
// on the aliases defined above. If a module is an external those aliases won't be used.
// We need tell webpack to not consider those packages as externals.
Expand Down Expand Up @@ -179,5 +183,7 @@ module.exports = {
{ source: '/api/:rest*', destination: '/api-docs/:rest*' },
];
},
reactMode: reactMode.startsWith('legacy') ? 'legacy' : reactMode,
},
reactStrictMode: reactMode === 'legacy-strict',
};
14 changes: 2 additions & 12 deletions docs/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,16 +198,6 @@ async function registerServiceWorker() {
}
}

// Add the strict mode back once the number of warnings is manageable.
// We might miss important warnings by keeping the strict mode 🌊🌊🌊.
const ReactMode =
{
// createSyncRoot compatible
sync: React.StrictMode,
// partial createRoot, ConcurrentMode is deprecated
concurrent: React.unstable_ConcurrentMode,
}[process.env.REACT_MODE] || React.Fragment;

let dependenciesLoaded = false;

function loadDependencies() {
Expand Down Expand Up @@ -302,7 +292,7 @@ function AppWrapper(props) {
}

return (
<ReactMode>
<React.Fragment>
<NextHead>
{fonts.map((font) => (
<link rel="stylesheet" href={font} key={font} />
Expand All @@ -318,7 +308,7 @@ function AppWrapper(props) {
<LanguageNegotiation />
</ReduxProvider>
<GoogleAnalytics key={router.route} />
</ReactMode>
</React.Fragment>
);
}

Expand Down