From c107e58acec82e53e58e93f73d4373f510e94a6f Mon Sep 17 00:00:00 2001 From: Hendrik Liebau Date: Tue, 29 Oct 2024 10:00:32 +0100 Subject: [PATCH] Delete obsolete codemod `next-dynamic-access-named-export` The codemod became obsolete with #71968, because named exports with `next/dynamic` are now supported again. --- .../11-upgrading/01-codemods.mdx | 40 --------- .../next-14-installed/README.md | 6 +- .../next-15-canary-43-installed/README.md | 1 - .../next-15-canary-43-installed/package.json | 11 --- .../pnpm-workspace.yaml | 0 .../next-15-canary-44-installed/README.md | 1 - .../next-15-canary-44-installed/package.json | 11 --- .../pnpm-workspace.yaml | 0 packages/next-codemod/lib/utils.ts | 6 -- .../access-named-export-block-01.input.js | 7 -- .../access-named-export-block-01.output.js | 9 -- .../access-named-export-block-02.input.tsx | 8 -- .../access-named-export-block-02.output.tsx | 10 --- .../access-named-export.input.js | 5 -- .../access-named-export.output.js | 7 -- .../no-access-to-named-export.input.js | 5 -- .../no-access-to-named-export.output.js | 5 -- .../non-next-dynamic-dynamic-import.input.js | 7 -- .../non-next-dynamic-dynamic-import.output.js | 7 -- .../unsupported-transform.input.js | 7 -- .../unsupported-transform.output.js | 7 -- .../next-dynamic-access-named-export.test.js | 17 ---- .../next-dynamic-access-named-export.ts | 82 ------------------- 23 files changed, 5 insertions(+), 254 deletions(-) delete mode 100644 packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/README.md delete mode 100644 packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/package.json delete mode 100644 packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/pnpm-workspace.yaml delete mode 100644 packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/README.md delete mode 100644 packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/package.json delete mode 100644 packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/pnpm-workspace.yaml delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.input.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.output.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-02.input.tsx delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-02.output.tsx delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export.input.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export.output.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/no-access-to-named-export.input.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/no-access-to-named-export.output.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/non-next-dynamic-dynamic-import.input.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/non-next-dynamic-dynamic-import.output.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/unsupported-transform.input.js delete mode 100644 packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/unsupported-transform.output.js delete mode 100644 packages/next-codemod/transforms/__tests__/next-dynamic-access-named-export.test.js delete mode 100644 packages/next-codemod/transforms/next-dynamic-access-named-export.ts diff --git a/docs/02-app/01-building-your-application/11-upgrading/01-codemods.mdx b/docs/02-app/01-building-your-application/11-upgrading/01-codemods.mdx index 2b9c7e4bf59fb..8a3e18903eb1c 100644 --- a/docs/02-app/01-building-your-application/11-upgrading/01-codemods.mdx +++ b/docs/02-app/01-building-your-application/11-upgrading/01-codemods.mdx @@ -189,46 +189,6 @@ export function GET(req: NextRequest) { } ``` -#### Transform `next/dynamic` imports accessing named exports to return an object with a `default` property - -##### `next-dynamic-access-named-export` - -```bash filename="Terminal" -npx @next/codemod@latest next-dynamic-access-named-export . -``` - -This codemod transforms dynamic imports using `next/dynamic` to ensure they return an object with a `default` property when accessing named exports. This aligns the behavior with `React.lazy` and addresses issues with accessing named exports from client components in server components. - -For example: - -```js -import dynamic from 'next/dynamic' - -const ComponentA = dynamic(() => - import('../components/a').then((mod) => mod.default) -) - -const ComponentB = dynamic(() => - import('../components/b').then((mod) => mod.ComponentB) -) -``` - -Transforms into: - -```js -import dynamic from 'next/dynamic' - -const ComponentA = dynamic(() => - import('../components/a').then((mod) => ({ default: mod.default })) -) - -const ComponentB = dynamic(() => - import('../components/b').then((mod) => ({ default: mod.ComponentB })) -) -``` - -> **Good to know**: This codemod only affects dynamic imports using `next/dynamic` and access named exports. - ### 14.0 #### Migrate `ImageResponse` imports diff --git a/packages/next-codemod/bin/__testfixtures__/next-14-installed/README.md b/packages/next-codemod/bin/__testfixtures__/next-14-installed/README.md index 8ee0d504d6974..3ead1c495c809 100644 --- a/packages/next-codemod/bin/__testfixtures__/next-14-installed/README.md +++ b/packages/next-codemod/bin/__testfixtures__/next-14-installed/README.md @@ -1 +1,5 @@ -suggests `next-dynamic-access-named-export` transform +Prompts for React 19 upgrade with a recommendation to do so +Suggests adding `--turbopack` to `next dev` script +Suggests `app-dir-runtime-config-experimental-edge` transform +Suggests `next-async-request-api` transform +Suggests `next-request-geo-ip` transform diff --git a/packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/README.md b/packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/README.md deleted file mode 100644 index 8ee0d504d6974..0000000000000 --- a/packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/README.md +++ /dev/null @@ -1 +0,0 @@ -suggests `next-dynamic-access-named-export` transform diff --git a/packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/package.json b/packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/package.json deleted file mode 100644 index e7c5a0986ddee..0000000000000 --- a/packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/package.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "next-15-canary-43-installed", - "scripts": { - "dev": "next dev" - }, - "dependencies": { - "next": "15.0.0-canary.43", - "react": "18.2.0", - "react-dom": "18.2.0" - } -} diff --git a/packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/pnpm-workspace.yaml b/packages/next-codemod/bin/__testfixtures__/next-15-canary-43-installed/pnpm-workspace.yaml deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/README.md b/packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/README.md deleted file mode 100644 index 86e19e7dd5f5d..0000000000000 --- a/packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/README.md +++ /dev/null @@ -1 +0,0 @@ -does not suggest `next-dynamic-access-named-export` transform diff --git a/packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/package.json b/packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/package.json deleted file mode 100644 index f272d454826bb..0000000000000 --- a/packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/package.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "next-15-canary-44-installed", - "scripts": { - "dev": "next dev" - }, - "dependencies": { - "next": "15.0.0-canary.44", - "react": "18.2.0", - "react-dom": "18.2.0" - } -} diff --git a/packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/pnpm-workspace.yaml b/packages/next-codemod/bin/__testfixtures__/next-15-canary-44-installed/pnpm-workspace.yaml deleted file mode 100644 index e69de29bb2d1d..0000000000000 diff --git a/packages/next-codemod/lib/utils.ts b/packages/next-codemod/lib/utils.ts index 27bb5656ffa30..5baf18c31c2e7 100644 --- a/packages/next-codemod/lib/utils.ts +++ b/packages/next-codemod/lib/utils.ts @@ -99,12 +99,6 @@ export const TRANSFORMER_INQUIRER_CHOICES = [ value: 'next-og-import', version: '14.0.0', }, - { - title: - 'Transform `next/dynamic` imports accessing named exports to return an object with a `default` property', - value: 'next-dynamic-access-named-export', - version: '15.0.0-canary.44', - }, { title: 'Install `@vercel/functions` to replace `geo` and `ip` properties on `NextRequest`', diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.input.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.input.js deleted file mode 100644 index 871a18a1aec84..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.input.js +++ /dev/null @@ -1,7 +0,0 @@ -import dynamic from 'next/dynamic' - -const DynamicComponent = dynamic( - () => import('./component').then(mod => { - return mod.default; - }) -) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.output.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.output.js deleted file mode 100644 index 56b62819aa893..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-01.output.js +++ /dev/null @@ -1,9 +0,0 @@ -import dynamic from 'next/dynamic' - -const DynamicComponent = dynamic( - () => import('./component').then(mod => { - return { - default: mod.default - }; - }) -) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-02.input.tsx b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-02.input.tsx deleted file mode 100644 index 71ea481c5fe36..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-02.input.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import type { JSX } from 'react' -import dynamic from 'next/dynamic' - -const DynamicComponent = dynamic( - () => import('./component').then(mod => { - return mod.default; - }) -) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-02.output.tsx b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-02.output.tsx deleted file mode 100644 index ee12603d4f4c6..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export-block-02.output.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { JSX } from 'react' -import dynamic from 'next/dynamic' - -const DynamicComponent = dynamic( - () => import('./component').then(mod => { - return { - default: mod.default - }; - }) -) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export.input.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export.input.js deleted file mode 100644 index 53fc00d2e06f3..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export.input.js +++ /dev/null @@ -1,5 +0,0 @@ -import dynamic from 'next/dynamic' - -const DynamicComponent = dynamic( - () => import('./component').then(mod => mod.Component) -) \ No newline at end of file diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export.output.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export.output.js deleted file mode 100644 index 88d579819e767..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/access-named-export.output.js +++ /dev/null @@ -1,7 +0,0 @@ -import dynamic from 'next/dynamic' - -const DynamicComponent = dynamic( - () => import('./component').then(mod => ({ - default: mod.Component - })) -) \ No newline at end of file diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/no-access-to-named-export.input.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/no-access-to-named-export.input.js deleted file mode 100644 index f83202c2c32f9..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/no-access-to-named-export.input.js +++ /dev/null @@ -1,5 +0,0 @@ -import dynamic from 'next/dynamic' - -const DynamicComponent = dynamic( - () => import('./component') -) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/no-access-to-named-export.output.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/no-access-to-named-export.output.js deleted file mode 100644 index f83202c2c32f9..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/no-access-to-named-export.output.js +++ /dev/null @@ -1,5 +0,0 @@ -import dynamic from 'next/dynamic' - -const DynamicComponent = dynamic( - () => import('./component') -) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/non-next-dynamic-dynamic-import.input.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/non-next-dynamic-dynamic-import.input.js deleted file mode 100644 index a06cb7dcb64c8..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/non-next-dynamic-dynamic-import.input.js +++ /dev/null @@ -1,7 +0,0 @@ -import dynamic from 'my-dynamic-call' - -const DynamicComponent = dynamic( - () => import('./component').then(mod => { - return mod.Component; - }) -) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/non-next-dynamic-dynamic-import.output.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/non-next-dynamic-dynamic-import.output.js deleted file mode 100644 index a06cb7dcb64c8..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/non-next-dynamic-dynamic-import.output.js +++ /dev/null @@ -1,7 +0,0 @@ -import dynamic from 'my-dynamic-call' - -const DynamicComponent = dynamic( - () => import('./component').then(mod => { - return mod.Component; - }) -) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/unsupported-transform.input.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/unsupported-transform.input.js deleted file mode 100644 index a180f87975b95..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/unsupported-transform.input.js +++ /dev/null @@ -1,7 +0,0 @@ -import dynamic from 'next/dynamic' - -const DynamicImportSourceNextDynamic1 = dynamic(() => import(source).then(mod => mod)) -const DynamicImportSourceNextDynamic2 = dynamic(async () => { - const mod = await import(source) - return mod.Component -}) diff --git a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/unsupported-transform.output.js b/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/unsupported-transform.output.js deleted file mode 100644 index a180f87975b95..0000000000000 --- a/packages/next-codemod/transforms/__testfixtures__/next-dynamic-access-named-export/unsupported-transform.output.js +++ /dev/null @@ -1,7 +0,0 @@ -import dynamic from 'next/dynamic' - -const DynamicImportSourceNextDynamic1 = dynamic(() => import(source).then(mod => mod)) -const DynamicImportSourceNextDynamic2 = dynamic(async () => { - const mod = await import(source) - return mod.Component -}) diff --git a/packages/next-codemod/transforms/__tests__/next-dynamic-access-named-export.test.js b/packages/next-codemod/transforms/__tests__/next-dynamic-access-named-export.test.js deleted file mode 100644 index e45f6c6a61f70..0000000000000 --- a/packages/next-codemod/transforms/__tests__/next-dynamic-access-named-export.test.js +++ /dev/null @@ -1,17 +0,0 @@ -/* global jest */ -jest.autoMockOff() -const defineTest = require('jscodeshift/dist/testUtils').defineTest -const { readdirSync } = require('fs') -const { join } = require('path') - -const fixtureDir = 'next-dynamic-access-named-export' -const fixtureDirPath = join(__dirname, '..', '__testfixtures__', fixtureDir) -const fixtures = readdirSync(fixtureDirPath) - .filter(file => /\.input\.(js|tsx)$/.test(file)) - -for (const file of fixtures) { - const fixture = file.replace(/\.input\.(js|tsx)/, ''); - const isTsx = file.endsWith('.tsx') - const prefix = `${fixtureDir}/${fixture}`; - defineTest(__dirname, fixtureDir, null, prefix, { parser: isTsx ? 'tsx' : 'babel' }); -} diff --git a/packages/next-codemod/transforms/next-dynamic-access-named-export.ts b/packages/next-codemod/transforms/next-dynamic-access-named-export.ts deleted file mode 100644 index f039e7b8731c2..0000000000000 --- a/packages/next-codemod/transforms/next-dynamic-access-named-export.ts +++ /dev/null @@ -1,82 +0,0 @@ -import type { FileInfo, API, ImportDeclaration } from 'jscodeshift' -import { createParserFromPath } from '../lib/parser' - -export default function transformer(file: FileInfo, _api: API) { - const j = createParserFromPath(file.path) - const root = j(file.source) - - // Find the import declaration for 'next/dynamic' - const dynamicImportDeclaration = root.find(j.ImportDeclaration, { - source: { value: 'next/dynamic' }, - }) - - // If the import declaration is found - if (dynamicImportDeclaration.size() > 0) { - const importDecl: ImportDeclaration = dynamicImportDeclaration.get(0).node - const dynamicImportName = importDecl.specifiers?.[0]?.local?.name - - if (!dynamicImportName) { - return file.source - } - // Find call expressions where the callee is the imported 'dynamic' - root - .find(j.CallExpression, { - callee: { name: dynamicImportName }, - }) - .forEach((path) => { - const arrowFunction = path.node.arguments[0] - - // Ensure the argument is an ArrowFunctionExpression - if (arrowFunction && arrowFunction.type === 'ArrowFunctionExpression') { - const importCall = arrowFunction.body - - // Ensure the parent of the import call is a CallExpression with a .then - if ( - importCall && - importCall.type === 'CallExpression' && - importCall.callee.type === 'MemberExpression' && - 'name' in importCall.callee.property && - importCall.callee.property.name === 'then' - ) { - const thenFunction = importCall.arguments[0] - // handle case of block statement case `=> { return mod.Component }` - // transform to`=> { return { default: mod.Component } }` - if ( - thenFunction && - thenFunction.type === 'ArrowFunctionExpression' && - thenFunction.body.type === 'BlockStatement' - ) { - const returnStatement = thenFunction.body.body[0] - // Ensure the body of the arrow function has a return statement with a MemberExpression - if ( - returnStatement && - returnStatement.type === 'ReturnStatement' && - returnStatement.argument?.type === 'MemberExpression' - ) { - returnStatement.argument = j.objectExpression([ - j.property( - 'init', - j.identifier('default'), - returnStatement.argument - ), - ]) - } - } - // handle case `=> mod.Component` - // transform to`=> ({ default: mod.Component })` - if ( - thenFunction && - thenFunction.type === 'ArrowFunctionExpression' && - thenFunction.body.type === 'MemberExpression' - ) { - thenFunction.body = j.objectExpression([ - j.property('init', j.identifier('default'), thenFunction.body), - ]) - } - } - } - }) - } - - return root.toSource() -}