From bf4d78ccf08d89089288b69b7fe12105be76d27f Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Wed, 5 Apr 2023 12:41:43 -0400 Subject: [PATCH] feat(nextjs): update to Next.js 13.2.4 --- .../packages/react/generators/library.json | 7 ++++++ packages/js/src/utils/typescript/ts-config.ts | 9 ++++++++ packages/next/migrations.json | 17 ++++++++++++++ packages/next/plugins/with-nx.ts | 7 ++++++ .../src/generators/library/library.spec.ts | 23 +++++++++++++++++++ .../next/src/generators/library/library.ts | 3 +++ packages/next/src/utils/versions.ts | 6 ++--- .../react/src/generators/library/schema.d.ts | 1 + .../react/src/generators/library/schema.json | 7 ++++++ 9 files changed, 77 insertions(+), 3 deletions(-) diff --git a/docs/generated/packages/react/generators/library.json b/docs/generated/packages/react/generators/library.json index 35b01e811a9cab..0806100bb36885 100644 --- a/docs/generated/packages/react/generators/library.json +++ b/docs/generated/packages/react/generators/library.json @@ -185,6 +185,13 @@ "default": false, "x-priority": "internal" }, + "includeDeepImports": { + "description": "Add a deep-import entry to tsconfig.", + "type": "boolean", + "hidden": true, + "default": false, + "x-priority": "internal" + }, "minimal": { "description": "Create a React library with a minimal setup, no separate test files.", "type": "boolean", diff --git a/packages/js/src/utils/typescript/ts-config.ts b/packages/js/src/utils/typescript/ts-config.ts index e52f146a3a210f..88d20587df34b2 100644 --- a/packages/js/src/utils/typescript/ts-config.ts +++ b/packages/js/src/utils/typescript/ts-config.ts @@ -59,6 +59,9 @@ export function updateRootTsConfig( importPath?: string; projectRoot: string; js?: boolean; + // For Next.js RSC users need to use deep-imports as a workaround for mixed RSC + 'use client' libraries. + // See: https://github.com/nrwl/nx/issues/15830 + includeDeepImports?: boolean; } ) { if (!options.importPath) { @@ -85,6 +88,12 @@ export function updateRootTsConfig( ), ]; + if (options.includeDeepImports) { + c.paths[`${options.importPath}/*`] = [ + joinPathFragments(options.projectRoot, './*'), + ]; + } + return json; }); } diff --git a/packages/next/migrations.json b/packages/next/migrations.json index a1d46660824cfc..95b0e0efb06d2c 100644 --- a/packages/next/migrations.json +++ b/packages/next/migrations.json @@ -301,6 +301,23 @@ "alwaysAddToPackageJson": false } } + }, + "15.9.3": { + "version": "15.9.3-beta.0", + "packages": { + "next": { + "version": "13.2.4", + "alwaysAddToPackageJson": false + }, + "eslint-config-next": { + "version": "13.2.4", + "alwaysAddToPackageJson": false + }, + "sass": { + "version": "1.60.0", + "alwaysAddToPackageJson": false + } + } } } } diff --git a/packages/next/plugins/with-nx.ts b/packages/next/plugins/with-nx.ts index b0ecd6c36b6fd4..84d5f8e100e5e5 100644 --- a/packages/next/plugins/with-nx.ts +++ b/packages/next/plugins/with-nx.ts @@ -224,6 +224,13 @@ export function getNextConfig( const userWebpack = nextConfig.webpack || ((x) => x); const { nx, ...validNextConfig } = nextConfig; return { + // Need to skip type checks for now until Next.js releases a fix. + // The PR is merged but unreleased. + // PR: https://github.com/vercel/next.js/pull/47534 + typescript: { + ignoreBuildErrors: true, + ...(validNextConfig.typescript ?? {}), + }, eslint: { ignoreDuringBuilds: true, ...(validNextConfig.eslint ?? {}), diff --git a/packages/next/src/generators/library/library.spec.ts b/packages/next/src/generators/library/library.spec.ts index 7905b85fa53ead..145cbe255b9a9c 100644 --- a/packages/next/src/generators/library/library.spec.ts +++ b/packages/next/src/generators/library/library.spec.ts @@ -4,9 +4,11 @@ import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; import { Linter } from '@nrwl/linter'; import libraryGenerator from './library'; import { Schema } from './schema'; + // need to mock cypress otherwise it'll use the nx installed version from package.json // which is v9 while we are testing for the new v10 version jest.mock('@nrwl/cypress/src/utils/cypress-version'); + describe('next library', () => { let mockedInstalledCypressVersion: jest.Mock< ReturnType @@ -133,4 +135,25 @@ describe('next library', () => { .jsxImportSource ).toEqual('@emotion/react'); }); + + it('should add deep import paths in tsconfig', async () => { + const appTree = createTreeWithEmptyWorkspace(); + + await libraryGenerator(appTree, { + name: 'myLib', + linter: Linter.EsLint, + skipFormat: false, + skipTsConfig: false, + unitTestRunner: 'jest', + style: 'css', + component: true, + }); + + expect( + readJson(appTree, 'tsconfig.base.json').compilerOptions.paths + ).toMatchObject({ + '@proj/my-lib': ['my-lib/src/index.ts'], + '@proj/my-lib/*': ['my-lib/*'], + }); + }); }); diff --git a/packages/next/src/generators/library/library.ts b/packages/next/src/generators/library/library.ts index 427c9bac4f5cac..ca7e09bb565231 100644 --- a/packages/next/src/generators/library/library.ts +++ b/packages/next/src/generators/library/library.ts @@ -33,6 +33,9 @@ export async function libraryGenerator(host: Tree, options: Schema) { ...options, compiler: 'swc', skipFormat: true, + // Always include deep import paths so users can mix server and client react components in the same library. + // See: https://github.com/nrwl/nx/issues/15830 + includeDeepImports: true, }); tasks.push(libTask); diff --git a/packages/next/src/utils/versions.ts b/packages/next/src/utils/versions.ts index 53d0ae41f0bb64..178e529d94fad7 100644 --- a/packages/next/src/utils/versions.ts +++ b/packages/next/src/utils/versions.ts @@ -1,8 +1,8 @@ export const nxVersion = require('../../package.json').version; -export const nextVersion = '13.1.1'; -export const eslintConfigNextVersion = '13.1.1'; -export const sassVersion = '1.55.0'; +export const nextVersion = '13.2.4'; +export const eslintConfigNextVersion = '13.2.4'; +export const sassVersion = '1.60.0'; export const lessLoader = '11.1.0'; export const stylusLoader = '7.1.0'; export const emotionServerVersion = '11.10.0'; diff --git a/packages/react/src/generators/library/schema.d.ts b/packages/react/src/generators/library/schema.d.ts index 1633b34d17bda9..4d47ff2e0a09dc 100644 --- a/packages/react/src/generators/library/schema.d.ts +++ b/packages/react/src/generators/library/schema.d.ts @@ -11,6 +11,7 @@ export interface Schema { globalCss?: boolean; importPath?: string; inSourceTests?: boolean; + includeDeepImports?: boolean; js?: boolean; linter: Linter; name: string; diff --git a/packages/react/src/generators/library/schema.json b/packages/react/src/generators/library/schema.json index fa7e3a82c2e45b..2311dc1f45b8d1 100644 --- a/packages/react/src/generators/library/schema.json +++ b/packages/react/src/generators/library/schema.json @@ -188,6 +188,13 @@ "default": false, "x-priority": "internal" }, + "includeDeepImports": { + "description": "Add a deep-import entry to tsconfig.", + "type": "boolean", + "hidden": true, + "default": false, + "x-priority": "internal" + }, "minimal": { "description": "Create a React library with a minimal setup, no separate test files.", "type": "boolean",