From 78270acb814faa923f964c947599e882c904ddd2 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 26 Oct 2022 12:53:32 -0700 Subject: [PATCH 1/4] Allow disabling Strict mode in app --- packages/next/client/app-index.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx index fe45a3eacb350..23784496e80d3 100644 --- a/packages/next/client/app-index.tsx +++ b/packages/next/client/app-index.tsx @@ -2,7 +2,7 @@ import '../build/polyfills/polyfill-module' // @ts-ignore react-dom/client exists when using React 18 import ReactDOMClient from 'react-dom/client' -import React, { use } from 'react' +import React, { ReactNode, use } from 'react' import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client' import measureWebVitals from './performance-relayer' @@ -149,6 +149,14 @@ function ServerRoot({ cacheKey }: { cacheKey: string }): JSX.Element { return root } +function StrictModeIfEnabled({ children }: { children: React.ReactNode }) { + return process.env.__NEXT_STRICT_MODE ? ( + {children} + ) : ( + <>{children} + ) +} + function Root({ children }: React.PropsWithChildren<{}>): React.ReactElement { React.useEffect(() => { measureWebVitals() @@ -213,7 +221,7 @@ export function hydrate() { } const reactEl = ( - + - + ) const isError = document.documentElement.id === '__next_error__' From 8cc443752a723029e9bc4e0c4ce36edd74e367f0 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 26 Oct 2022 13:14:54 -0700 Subject: [PATCH 2/4] Use simpler component --- packages/next/client/app-index.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx index 23784496e80d3..44744a73baed5 100644 --- a/packages/next/client/app-index.tsx +++ b/packages/next/client/app-index.tsx @@ -149,13 +149,9 @@ function ServerRoot({ cacheKey }: { cacheKey: string }): JSX.Element { return root } -function StrictModeIfEnabled({ children }: { children: React.ReactNode }) { - return process.env.__NEXT_STRICT_MODE ? ( - {children} - ) : ( - <>{children} - ) -} +const StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE + ? React.StrictMode + : React.Fragment function Root({ children }: React.PropsWithChildren<{}>): React.ReactElement { React.useEffect(() => { From 3f108cdc31ad4d3ebb33a6e096da2e5d4f9f8821 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Wed, 26 Oct 2022 15:34:41 -0700 Subject: [PATCH 3/4] Remove unused import --- packages/next/client/app-index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx index 44744a73baed5..3fe2df0629358 100644 --- a/packages/next/client/app-index.tsx +++ b/packages/next/client/app-index.tsx @@ -2,7 +2,7 @@ import '../build/polyfills/polyfill-module' // @ts-ignore react-dom/client exists when using React 18 import ReactDOMClient from 'react-dom/client' -import React, { ReactNode, use } from 'react' +import React, { use } from 'react' import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client' import measureWebVitals from './performance-relayer' From a58ba301ebcd1d6d16041e2ba18f727c6df4b6fc Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Thu, 27 Oct 2022 16:00:40 -0700 Subject: [PATCH 4/4] Enable strict mode by default for app dir --- packages/next/build/webpack-config.ts | 12 +++++++++++- packages/next/client/app-index.tsx | 2 +- packages/next/server/config-shared.ts | 4 ++-- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index a51abb5acbac9..9a95f3f2c694b 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -244,7 +244,17 @@ export function getDefineEnv({ 'process.env.__NEXT_BUILD_INDICATOR_POSITION': JSON.stringify( config.devIndicators.buildActivityPosition ), - 'process.env.__NEXT_STRICT_MODE': JSON.stringify(config.reactStrictMode), + 'process.env.__NEXT_STRICT_MODE': JSON.stringify( + config.reactStrictMode === null ? false : config.reactStrictMode + ), + 'process.env.__NEXT_STRICT_MODE_APP': JSON.stringify( + // When next.config.js does not have reactStrictMode enabling appDir will enable it. + config.reactStrictMode === null + ? config.experimental.appDir + ? true + : false + : config.reactStrictMode + ), 'process.env.__NEXT_REACT_ROOT': JSON.stringify(hasReactRoot), 'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify( !dev && config.optimizeFonts diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx index 3fe2df0629358..cc9c738828064 100644 --- a/packages/next/client/app-index.tsx +++ b/packages/next/client/app-index.tsx @@ -149,7 +149,7 @@ function ServerRoot({ cacheKey }: { cacheKey: string }): JSX.Element { return root } -const StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE +const StrictModeIfEnabled = process.env.__NEXT_STRICT_MODE_APP ? React.StrictMode : React.Fragment diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index 8b46186c766de..957ab2b69119a 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -391,7 +391,7 @@ export interface NextConfig extends Record { * * @see [React Strict Mode](https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode) */ - reactStrictMode?: boolean + reactStrictMode?: boolean | null /** * Add public (in browser) runtime configuration to your app @@ -545,7 +545,7 @@ export const defaultConfig: NextConfig = { excludeDefaultMomentLocales: true, serverRuntimeConfig: {}, publicRuntimeConfig: {}, - reactStrictMode: false, + reactStrictMode: null, httpAgentOptions: { keepAlive: true, },