Merge branch 'canary' into async-module-wrap

huozhi · web-flow · commit c7dd294bb241 · 2022-08-29T16:19:13.000+02:00
diff --git a/.github/actions/next-stats-action/Dockerfile b/.github/actions/next-stats-action/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14-buster
+FROM node:16-bullseye
 
 LABEL com.github.actions.name="Next.js PR Stats"
 LABEL com.github.actions.description="Compares stats of a PR with the main branch"
diff --git a/.github/actions/next-stats-action/src/run/index.js b/.github/actions/next-stats-action/src/run/index.js
@@ -58,9 +58,15 @@ async function runConfigs(
       }
 
       const buildStart = Date.now()
-      await exec(`cd ${statsAppDir} && ${statsConfig.appBuildCommand}`, false, {
-        env: yarnEnvValues,
-      })
+      console.log(
+        await exec(
+          `cd ${statsAppDir} && ${statsConfig.appBuildCommand}`,
+          false,
+          {
+            env: yarnEnvValues,
+          }
+        )
+      )
       curStats.General.buildDuration = Date.now() - buildStart
 
       // apply renames to get deterministic output names
@@ -153,9 +159,15 @@ async function runConfigs(
       }
 
       const secondBuildStart = Date.now()
-      await exec(`cd ${statsAppDir} && ${statsConfig.appBuildCommand}`, false, {
-        env: yarnEnvValues,
-      })
+      console.log(
+        await exec(
+          `cd ${statsAppDir} && ${statsConfig.appBuildCommand}`,
+          false,
+          {
+            env: yarnEnvValues,
+          }
+        )
+      )
       curStats.General.buildDurationCached = Date.now() - secondBuildStart
 
       if (statsConfig.appDevCommand) {
diff --git a/docs/advanced-features/middleware.md b/docs/advanced-features/middleware.md
@@ -50,6 +50,8 @@ export const config = {
 }
 ```
 
+> **Note** the `pageExtensions` config affects middleware as well, [see related documentation here](/docs/api-reference/next.config.js/custom-page-extensions.md).
+
 ## Matching Paths
 
 Middleware will be invoked for **every route in your project**. The following is the execution order:
diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
@@ -113,6 +113,7 @@ Scripts that use the `afterInteractive` strategy are injected client-side and wi
 
 ```jsx
 <Script
+  id="google-analytics"
   strategy="afterInteractive"
   dangerouslySetInnerHTML={{
     __html: `
diff --git a/examples/with-supabase-auth-realtime-db/README.md b/examples/with-supabase-auth-realtime-db/README.md
@@ -8,6 +8,14 @@ The Vercel deployment will guide you through creating a Supabase account and pro
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db&project-name=nextjs-with-supabase-auth&repository-name=nextjs-with-supabase-auth&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv)
 
+## Running Locally
+
+1. `cd` into this directory
+1. Run `npm install` to install dependencies
+1. Create a Supabase account and new project
+1. Copy `.env.local.example` into `.env.local` and add the project keys
+1. Run `npm run dev` to start the local development server
+
 ## Feedback and issues
 
 Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1577,61 +1577,74 @@ export default async function getBaseWebpackConfig(
                   },
                   {
                     resolve: {
-                      // Full list of old polyfills is accessible here:
-                      // https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42
-                      fallback: {
-                        assert: require.resolve('next/dist/compiled/assert'),
-                        buffer: require.resolve('next/dist/compiled/buffer/'),
-                        constants: require.resolve(
-                          'next/dist/compiled/constants-browserify'
-                        ),
-                        crypto: require.resolve(
-                          'next/dist/compiled/crypto-browserify'
-                        ),
-                        domain: require.resolve(
-                          'next/dist/compiled/domain-browser'
-                        ),
-                        http: require.resolve('next/dist/compiled/stream-http'),
-                        https: require.resolve(
-                          'next/dist/compiled/https-browserify'
-                        ),
-                        os: require.resolve('next/dist/compiled/os-browserify'),
-                        path: require.resolve(
-                          'next/dist/compiled/path-browserify'
-                        ),
-                        punycode: require.resolve(
-                          'next/dist/compiled/punycode'
-                        ),
-                        process: require.resolve('./polyfills/process'),
-                        // Handled in separate alias
-                        querystring: require.resolve(
-                          'next/dist/compiled/querystring-es3'
-                        ),
-                        stream: require.resolve(
-                          'next/dist/compiled/stream-browserify'
-                        ),
-                        string_decoder: require.resolve(
-                          'next/dist/compiled/string_decoder'
-                        ),
-                        sys: require.resolve('next/dist/compiled/util/'),
-                        timers: require.resolve(
-                          'next/dist/compiled/timers-browserify'
-                        ),
-                        tty: require.resolve(
-                          'next/dist/compiled/tty-browserify'
-                        ),
-                        // Handled in separate alias
-                        // url: require.resolve('url/'),
-                        util: require.resolve('next/dist/compiled/util/'),
-                        vm: require.resolve('next/dist/compiled/vm-browserify'),
-                        zlib: require.resolve(
-                          'next/dist/compiled/browserify-zlib'
-                        ),
-                        events: require.resolve('next/dist/compiled/events/'),
-                        setImmediate: require.resolve(
-                          'next/dist/compiled/setimmediate'
-                        ),
-                      },
+                      fallback:
+                        config.experimental.fallbackNodePolyfills === false
+                          ? {}
+                          : {
+                              assert: require.resolve(
+                                'next/dist/compiled/assert'
+                              ),
+                              buffer: require.resolve(
+                                'next/dist/compiled/buffer/'
+                              ),
+                              constants: require.resolve(
+                                'next/dist/compiled/constants-browserify'
+                              ),
+                              crypto: require.resolve(
+                                'next/dist/compiled/crypto-browserify'
+                              ),
+                              domain: require.resolve(
+                                'next/dist/compiled/domain-browser'
+                              ),
+                              http: require.resolve(
+                                'next/dist/compiled/stream-http'
+                              ),
+                              https: require.resolve(
+                                'next/dist/compiled/https-browserify'
+                              ),
+                              os: require.resolve(
+                                'next/dist/compiled/os-browserify'
+                              ),
+                              path: require.resolve(
+                                'next/dist/compiled/path-browserify'
+                              ),
+                              punycode: require.resolve(
+                                'next/dist/compiled/punycode'
+                              ),
+                              process: require.resolve('./polyfills/process'),
+                              // Handled in separate alias
+                              querystring: require.resolve(
+                                'next/dist/compiled/querystring-es3'
+                              ),
+                              stream: require.resolve(
+                                'next/dist/compiled/stream-browserify'
+                              ),
+                              string_decoder: require.resolve(
+                                'next/dist/compiled/string_decoder'
+                              ),
+                              sys: require.resolve('next/dist/compiled/util/'),
+                              timers: require.resolve(
+                                'next/dist/compiled/timers-browserify'
+                              ),
+                              tty: require.resolve(
+                                'next/dist/compiled/tty-browserify'
+                              ),
+                              // Handled in separate alias
+                              // url: require.resolve('url/'),
+                              util: require.resolve('next/dist/compiled/util/'),
+                              vm: require.resolve(
+                                'next/dist/compiled/vm-browserify'
+                              ),
+                              zlib: require.resolve(
+                                'next/dist/compiled/browserify-zlib'
+                              ),
+                              events: require.resolve(
+                                'next/dist/compiled/events/'
+                              ),
+                              setImmediate: require.resolve(
+                                'next/dist/compiled/setimmediate'
+                              ),
+                            },
                     },
                   },
                 ],
diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
@@ -61,6 +61,9 @@ const loadScript = (props: ScriptProps): void => {
 
   const loadPromise = new Promise<void>((resolve, reject) => {
     el.addEventListener('load', function (e) {
+      // add cacheKey to LoadCache when load successfully
+      LoadCache.add(cacheKey)
+
       resolve()
       if (onLoad) {
         onLoad.call(this, e)
@@ -79,22 +82,27 @@ const loadScript = (props: ScriptProps): void => {
     }
   })
 
-  if (src) {
-    ScriptCache.set(src, loadPromise)
-  }
-  LoadCache.add(cacheKey)
-
   if (dangerouslySetInnerHTML) {
     el.innerHTML = dangerouslySetInnerHTML.__html || ''
+
+    // add cacheKey to LoadCache for inline script
+    LoadCache.add(cacheKey)
   } else if (children) {
     el.textContent =
       typeof children === 'string'
         ? children
         : Array.isArray(children)
         ? children.join('')
         : ''
+
+    // add cacheKey to LoadCache for inline script
+    LoadCache.add(cacheKey)
   } else if (src) {
     el.src = src
+    // do not add cacheKey into LoadCache for remote script here
+    // cacheKey will be added to LoadCache when it is actually loaded (see loadPromise above)
+
+    ScriptCache.set(src, loadPromise)
   }
 
   for (const [k, value] of Object.entries(props)) {
@@ -207,4 +215,6 @@ function Script(props: ScriptProps): JSX.Element | null {
   return null
 }
 
+Object.defineProperty(Script, '__nextScript', { value: true })
+
 export default Script
diff --git a/packages/next/lib/typescript/writeConfigurationDefaults.ts b/packages/next/lib/typescript/writeConfigurationDefaults.ts
@@ -90,9 +90,6 @@ export function getRequiredConfiguration(
   const desiredCompilerOptions = getDesiredCompilerOptions(ts)
   for (const optionKey of Object.keys(desiredCompilerOptions)) {
     const ev = desiredCompilerOptions[optionKey]
-    if (optionKey === 'moduleResolution') {
-      console.log({ optionKey, ev, current: res[optionKey] })
-    }
     if (!('value' in ev)) {
       continue
     }
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -10,10 +10,10 @@ import type {
   DocumentType,
   NEXT_DATA,
 } from '../shared/lib/utils'
+import type { ScriptProps } from '../client/script'
+
 import { BuildManifest, getPageFiles } from '../server/get-page-files'
-import { cleanAmpPath } from '../server/utils'
 import { htmlEscapeJsonString } from '../server/htmlescape'
-import Script, { ScriptProps } from '../client/script'
 import isError from '../lib/is-error'
 
 import { HtmlContext } from '../shared/lib/html-context'
@@ -765,7 +765,10 @@ export class Head extends Component<HeadProps> {
             {!hasCanonicalRel && (
               <link
                 rel="canonical"
-                href={canonicalBase + cleanAmpPath(dangerousAsPath)}
+                href={
+                  canonicalBase +
+                  require('../server/utils').cleanAmpPath(dangerousAsPath)
+                }
               />
             )}
             {/* https://www.ampproject.org/docs/fundamentals/optimize_amp#optimize-the-amp-runtime-loading */}
@@ -871,7 +874,8 @@ function handleDocumentScriptLoaderItems(
   React.Children.forEach(combinedChildren, (child: any) => {
     if (!child) return
 
-    if (child.type === Script) {
+    // When using the `next/script` component, register it in script loader.
+    if (child.type?.__nextScript) {
       if (child.props.strategy === 'beforeInteractive') {
         scriptLoader.beforeInteractive = (
           scriptLoader.beforeInteractive || []
diff --git a/packages/next/server/config-schema.ts b/packages/next/server/config-schema.ts
@@ -258,6 +258,9 @@ const configSchema = {
         externalDir: {
           type: 'boolean',
         },
+        fallbackNodePolyfills: {
+          type: 'boolean',
+        },
         forceSwcTransforms: {
           type: 'boolean',
         },
diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts
@@ -145,6 +145,12 @@ export interface ExperimentalConfig {
   }
   swcPlugins?: Array<[string, Record<string, unknown>]>
   largePageDataBytes?: number
+  /**
+   * If set to `false`, webpack won't fall back to polyfill Node.js modules in the browser
+   * Full list of old polyfills is accessible here:
+   * [webpack/webpack#ModuleNotoundError.js#L13-L42](https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42)
+   */
+  fallbackNodePolyfills?: false
 }
 
 export type ExportPathMap = {
diff --git a/test/development/correct-tsconfig-defaults/index.test.ts b/test/development/correct-tsconfig-defaults/index.test.ts
@@ -22,7 +22,7 @@ describe('correct tsconfig.json defaults', () => {
   })
   afterAll(() => next.destroy())
 
-  it('should add `moduleResoution` when generating tsconfig.json in dev', async () => {
+  it('should add `moduleResolution` when generating tsconfig.json in dev', async () => {
     const tsconfigPath = path.join(next.testDir, 'tsconfig.json')
     expect(fs.existsSync(tsconfigPath)).toBeFalse()
 
@@ -33,9 +33,28 @@ describe('correct tsconfig.json defaults', () => {
     expect(fs.existsSync(tsconfigPath)).toBeTrue()
 
     const tsconfig = JSON.parse(await next.readFile('tsconfig.json'))
+    expect(next.cliOutput).not.toContain('moduleResolution')
 
     expect(tsconfig.compilerOptions).toEqual(
       expect.objectContaining({ moduleResolution: 'node' })
     )
   })
+
+  it('should not warn for `moduleResolution` when already present and valid', async () => {
+    const tsconfigPath = path.join(next.testDir, 'tsconfig.json')
+    expect(fs.existsSync(tsconfigPath)).toBeTrue()
+
+    await next.start()
+    await waitFor(1000)
+    await next.stop()
+
+    expect(fs.existsSync(tsconfigPath)).toBeTrue()
+
+    const tsconfig = JSON.parse(await next.readFile('tsconfig.json'))
+
+    expect(tsconfig.compilerOptions).toEqual(
+      expect.objectContaining({ moduleResolution: 'node' })
+    )
+    expect(next.cliOutput).not.toContain('moduleResolution')
+  })
 })
diff --git a/test/e2e/app-dir/app/app/css/css-page/page.server.js b/test/e2e/app-dir/app/app/css/css-page/page.server.js
@@ -1,5 +1,13 @@
 import './style.css'
+import styles from './style.module.css'
 
 export default function Page() {
-  return <h1>Page</h1>
+  return (
+    <>
+      <h1>Page</h1>
+      <div id="cssm" className={styles.mod}>
+        CSSM
+      </div>
+    </>
+  )
 }
diff --git a/test/e2e/app-dir/app/app/css/css-page/style.module.css b/test/e2e/app-dir/app/app/css/css-page/style.module.css
@@ -0,0 +1,3 @@
+.mod {
+  color: blue;
+}
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
diff --git a/test/integration/script-loader/base/pages/page10.js b/test/integration/script-loader/base/pages/page10.js
diff --git a/test/integration/script-loader/strictmode/next.config.js b/test/integration/script-loader/strictmode/next.config.js
diff --git a/test/integration/script-loader/strictmode/pages/onready.js b/test/integration/script-loader/strictmode/pages/onready.js
diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
diff --git a/test/integration/tsconfig-verifier/test/index.test.js b/test/integration/tsconfig-verifier/test/index.test.js
diff --git a/test/production/disable-fallback-polyfills/index.test.ts b/test/production/disable-fallback-polyfills/index.test.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-FROM node:14-buster`
	`1`	`+FROM node:16-bullseye`
`2`	`2`
`3`	`3`	`LABEL com.github.actions.name="Next.js PR Stats"`
`4`	`4`	`LABEL com.github.actions.description="Compares stats of a PR with the main branch"`
Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,8 @@ export const config = {`
`50`	`50`	`}`
`51`	`51`	```
`52`	`52`
	`53`	+> Note the `pageExtensions` config affects middleware as well, [see related documentation here](/docs/api-reference/next.config.js/custom-page-extensions.md).
	`54`	`+`
`53`	`55`	`## Matching Paths`
`54`	`56`
`55`	`57`	`Middleware will be invoked for every route in your project. The following is the execution order:`