From ded93bf64507e63f68af8f2bb64b4fae298dc4a6 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 19 Dec 2022 18:51:34 +0100 Subject: [PATCH 1/3] should not contain pages css in app dir (#44151) * Filter out the css chunk from `pages/` * add indent for flight manifests in dev mode for development convenience ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) --- .../plugins/flight-client-entry-plugin.ts | 18 +++++++++++------- .../webpack/plugins/flight-manifest-plugin.ts | 6 ++++-- test/e2e/app-dir/index.test.ts | 5 +++++ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index 5dddca730f417b6..a340e9d3f3a487e 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -345,14 +345,18 @@ export class FlightClientEntryPlugin { stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH, }, (assets: webpack.Compilation['assets']) => { - const manifest = JSON.stringify({ - ...serverCSSManifest, - ...edgeServerCSSManifest, - __entry_css__: { - ...serverCSSManifest.__entry_css__, - ...edgeServerCSSManifest.__entry_css__, + const manifest = JSON.stringify( + { + ...serverCSSManifest, + ...edgeServerCSSManifest, + __entry_css__: { + ...serverCSSManifest.__entry_css__, + ...edgeServerCSSManifest.__entry_css__, + }, }, - }) + null, + this.dev ? 2 : undefined + ) assets[FLIGHT_SERVER_CSS_MANIFEST + '.json'] = new sources.RawSource( manifest ) as unknown as webpack.sources.RawSource diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts index 7f0cd647638841b..92a35e080b1b4aa 100644 --- a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts @@ -191,7 +191,9 @@ export class FlightManifestPlugin { ssrNamedModuleId = `./${ssrNamedModuleId.replace(/\\/g, '/')}` if (isCSSModule) { - const chunks = [...chunk.files].filter((f) => f.endsWith('.css')) + const chunks = [...chunk.files].filter( + (f) => !f.startsWith('static/css/pages/') && f.endsWith('.css') + ) if (!manifest[resource]) { manifest[resource] = { default: { @@ -350,7 +352,7 @@ export class FlightManifestPlugin { }) const file = 'server/' + FLIGHT_MANIFEST - const json = JSON.stringify(manifest) + const json = JSON.stringify(manifest, null, this.dev ? 2 : undefined) ASYNC_CLIENT_MODULES.clear() diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts index 8a5cf0ab95cc6ec..87604259b2f021b 100644 --- a/test/e2e/app-dir/index.test.ts +++ b/test/e2e/app-dir/index.test.ts @@ -1315,6 +1315,11 @@ createNextDescribe( ).toBe('rgb(0, 0, 255)') }) + it('should not contain pages css in app dir page', async () => { + const html = await next.render('/css/css-page') + expect(html).not.toContain('/pages/_app.css') + }) + if (!isDev) { it('should not include unused css modules in the page in prod', async () => { const browser = await next.browser('/css/css-page/unused') From 887cbe43345ce1b30500a55e8bdfc611fbf493ab Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Mon, 19 Dec 2022 19:05:53 +0100 Subject: [PATCH 2/3] Add types as a default dependency into tests (#44140) --- test/e2e/app-dir/app-alias.test.ts | 7 ------- test/e2e/app-dir/app-edge-global.test.ts | 7 ------- test/e2e/app-dir/app-edge.test.ts | 7 ------- test/e2e/app-dir/create-root-layout.test.ts | 7 ------- test/e2e/app-dir/import.test.ts | 7 ------- test/e2e/app-dir/layout-params.test.ts | 7 ------- .../navigation-and-querystring.test.ts | 7 ------- .../use-selected-layout-segment-s.test.ts | 7 ------- test/e2e/new-link-behavior/typescript.test.ts | 5 ----- test/e2e/test-utils-tests/basic/basic.test.ts | 9 ++------- test/lib/next-modes/base.ts | 3 +++ test/production/ci-missing-typescript-deps/index.test.ts | 3 +++ 12 files changed, 8 insertions(+), 68 deletions(-) diff --git a/test/e2e/app-dir/app-alias.test.ts b/test/e2e/app-dir/app-alias.test.ts index 1c8583af624e36f..284d4d34eadd304 100644 --- a/test/e2e/app-dir/app-alias.test.ts +++ b/test/e2e/app-dir/app-alias.test.ts @@ -5,13 +5,6 @@ createNextDescribe( 'app-dir alias handling', { files: path.join(__dirname, 'app-alias'), - dependencies: { - react: 'latest', - 'react-dom': 'latest', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, packageJson: { type: 'module', }, diff --git a/test/e2e/app-dir/app-edge-global.test.ts b/test/e2e/app-dir/app-edge-global.test.ts index 9f0fbf66cbcfcc8..50afb6dac254314 100644 --- a/test/e2e/app-dir/app-edge-global.test.ts +++ b/test/e2e/app-dir/app-edge-global.test.ts @@ -5,13 +5,6 @@ createNextDescribe( 'app-dir global edge configuration', { files: path.join(__dirname, 'app-edge-global'), - dependencies: { - react: 'latest', - 'react-dom': 'latest', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, skipDeployment: true, }, ({ next }) => { diff --git a/test/e2e/app-dir/app-edge.test.ts b/test/e2e/app-dir/app-edge.test.ts index 6c098b83aa4ba64..5c91edffbada1b5 100644 --- a/test/e2e/app-dir/app-edge.test.ts +++ b/test/e2e/app-dir/app-edge.test.ts @@ -6,13 +6,6 @@ createNextDescribe( 'app-dir edge SSR', { files: path.join(__dirname, 'app-edge'), - dependencies: { - react: 'latest', - 'react-dom': 'latest', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, skipDeployment: true, }, ({ next }) => { diff --git a/test/e2e/app-dir/create-root-layout.test.ts b/test/e2e/app-dir/create-root-layout.test.ts index 53fa0e8fc3353fb..fc52582fe81efd0 100644 --- a/test/e2e/app-dir/create-root-layout.test.ts +++ b/test/e2e/app-dir/create-root-layout.test.ts @@ -218,13 +218,6 @@ describe('app-dir create root layout', () => { path.join(__dirname, 'create-root-layout/next.config.js') ), }, - dependencies: { - react: 'latest', - 'react-dom': 'latest', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, }) }) afterAll(() => next.destroy()) diff --git a/test/e2e/app-dir/import.test.ts b/test/e2e/app-dir/import.test.ts index ed434e39317e38b..93ca23ce6fc21ef 100644 --- a/test/e2e/app-dir/import.test.ts +++ b/test/e2e/app-dir/import.test.ts @@ -5,13 +5,6 @@ createNextDescribe( 'app dir imports', { files: path.join(__dirname, 'import'), - dependencies: { - react: 'latest', - 'react-dom': 'latest', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, }, ({ next }) => { ;['js', 'jsx', 'ts', 'tsx'].forEach((ext) => { diff --git a/test/e2e/app-dir/layout-params.test.ts b/test/e2e/app-dir/layout-params.test.ts index 2463baa14fba8cd..9fc9f2f6b68be85 100644 --- a/test/e2e/app-dir/layout-params.test.ts +++ b/test/e2e/app-dir/layout-params.test.ts @@ -5,13 +5,6 @@ createNextDescribe( 'app dir - layout params', { files: path.join(__dirname, './layout-params'), - dependencies: { - react: 'latest', - 'react-dom': 'latest', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, }, ({ next }) => { describe('basic params', () => { diff --git a/test/e2e/app-dir/navigation-and-querystring/navigation-and-querystring.test.ts b/test/e2e/app-dir/navigation-and-querystring/navigation-and-querystring.test.ts index 3b3d49d87bc3b32..acfc456bd82e974 100644 --- a/test/e2e/app-dir/navigation-and-querystring/navigation-and-querystring.test.ts +++ b/test/e2e/app-dir/navigation-and-querystring/navigation-and-querystring.test.ts @@ -9,13 +9,6 @@ describe('app-dir navigation and querystring', () => { beforeAll(async () => { next = await createNext({ files: new FileRef(__dirname), - dependencies: { - react: 'latest', - 'react-dom': 'latest', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, }) }) afterAll(() => next.destroy()) diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts index 12410ceb089bdcb..eaac38338e97484 100644 --- a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts +++ b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts @@ -9,13 +9,6 @@ describe('useSelectedLayoutSegment(s)', () => { beforeAll(async () => { next = await createNext({ files: new FileRef(__dirname), - dependencies: { - react: 'latest', - 'react-dom': 'latest', - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, }) }) afterAll(() => next.destroy()) diff --git a/test/e2e/new-link-behavior/typescript.test.ts b/test/e2e/new-link-behavior/typescript.test.ts index ac2c22408ba72fa..33a23984f858eca 100644 --- a/test/e2e/new-link-behavior/typescript.test.ts +++ b/test/e2e/new-link-behavior/typescript.test.ts @@ -17,11 +17,6 @@ describe('New Link Behavior', () => { 'tsconfig.json': new FileRef(path.join(appDir, 'tsconfig.json')), 'next.config.js': new FileRef(path.join(appDir, 'next.config.js')), }, - dependencies: { - typescript: '*', - '@types/react': '*', - '@types/node': '*', - }, }) }) afterAll(() => next.destroy()) diff --git a/test/e2e/test-utils-tests/basic/basic.test.ts b/test/e2e/test-utils-tests/basic/basic.test.ts index e37b2145639ceaf..a9b63c7ed246794 100644 --- a/test/e2e/test-utils-tests/basic/basic.test.ts +++ b/test/e2e/test-utils-tests/basic/basic.test.ts @@ -1,4 +1,4 @@ -import { createNext, FileRef } from 'e2e-utils' +import { createNext } from 'e2e-utils' import { NextInstance } from 'test/lib/next-modes/base' import { fetchViaHTTP } from 'next-test-utils' @@ -7,12 +7,7 @@ describe('createNext', () => { beforeAll(async () => { next = await createNext({ - files: new FileRef(__dirname), - dependencies: { - typescript: 'latest', - '@types/react': 'latest', - '@types/node': 'latest', - }, + files: __dirname, }) }) afterAll(() => next.destroy()) diff --git a/test/lib/next-modes/base.ts b/test/lib/next-modes/base.ts index 685199bf3da9a5d..767f0bd030ad4a2 100644 --- a/test/lib/next-modes/base.ts +++ b/test/lib/next-modes/base.ts @@ -129,6 +129,9 @@ export class NextInstance { const finalDependencies = { react: reactVersion, 'react-dom': reactVersion, + '@types/react': reactVersion, + typescript: 'latest', + '@types/node': 'latest', ...this.dependencies, ...this.packageJson?.dependencies, } diff --git a/test/production/ci-missing-typescript-deps/index.test.ts b/test/production/ci-missing-typescript-deps/index.test.ts index 3fafe41576137ae..5b19755ecb454a7 100644 --- a/test/production/ci-missing-typescript-deps/index.test.ts +++ b/test/production/ci-missing-typescript-deps/index.test.ts @@ -14,6 +14,9 @@ describe('ci-missing-typescript-deps', () => { CI: '1', }, skipStart: true, + dependencies: { + typescript: undefined, + }, }) try { let error From ae5502eaafea1ac90065e7e1833af952c6d63c67 Mon Sep 17 00:00:00 2001 From: Didi Keke Date: Mon, 19 Dec 2022 18:46:06 +0000 Subject: [PATCH 3/3] docs: Add missing type to import statement (#44111) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper --- docs/api-reference/data-fetching/get-static-props.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/api-reference/data-fetching/get-static-props.md b/docs/api-reference/data-fetching/get-static-props.md index 4a1878780fc568e..9044a46edab9b6b 100644 --- a/docs/api-reference/data-fetching/get-static-props.md +++ b/docs/api-reference/data-fetching/get-static-props.md @@ -233,8 +233,7 @@ export const getStaticProps: GetStaticProps<{ posts: Post[] }> = async ( If you want to get inferred typings for your props, you can use `InferGetStaticPropsType`: ```tsx -import { InferGetStaticPropsType } from 'next' -import { GetStaticProps } from 'next' +import type { InferGetStaticPropsType, GetStaticProps } from 'next' type Post = { author: string