@next/codemod 15.0.0-canary.183 → 15.0.0-canary.184

package/bin/upgrade.js

@@ -53,18 +53,59 @@ async function runUpgrade(revision, options) {
         console.log(`${picocolors_1.default.green('✓')} Current Next.js version is already on or higher than the target version "v${targetNextVersion}".`);
         return;
     }
+    const installedReactVersion = getInstalledReactVersion();
+    console.log(`Current React version: v${installedReactVersion}`);
+    let shouldStayOnReact18 = false;
+    if (
+    // From release v14.3.0-canary.45, Next.js expects the React version to be 19.0.0-beta.0
+    // If the user is on a version higher than this but is still on React 18, we ask them
+    // if they still want to stay on React 18 after the upgrade.
+    // IF THE USER USES APP ROUTER, we expect them to upgrade React to > 19.0.0-beta.0,
+    // we should only let the user stay on React 18 if they are using pure Pages Router.
+    // x-ref(PR): https://github.com/vercel/next.js/pull/65058
+    // x-ref(release): https://github.com/vercel/next.js/releases/tag/v14.3.0-canary.45
+    (0, compare_versions_1.compareVersions)(installedNextVersion, '14.3.0-canary.45') >= 0 &&
+        installedReactVersion.startsWith('18')) {
+        const shouldStayOnReact18Res = await (0, prompts_1.default)({
+            type: 'confirm',
+            name: 'shouldStayOnReact18',
+            message: `Are you using ${picocolors_1.default.underline('only the Pages Router')} (no App Router) and prefer to stay on React 18?`,
+            initial: false,
+            active: 'Yes',
+            inactive: 'No',
+        }, { onCancel: utils_1.onCancel });
+        shouldStayOnReact18 = shouldStayOnReact18Res.shouldStayOnReact18;
+    }
     // We're resolving a specific version here to avoid including "ugly" version queries
     // in the manifest.
     // E.g. in peerDependencies we could have `^18.2.0 || ^19.0.0 || 20.0.0-canary`
     // If we'd just `npm add` that, the manifest would read the same version query.
     // This is basically a `npm --save-exact react@$versionQuery` that works for every package manager.
-    const targetReactVersion = await loadHighestNPMVersionMatching(`react@${targetNextPackageJson.peerDependencies['react']}`);
+    const targetReactVersion = shouldStayOnReact18
+        ? '18.3.1'
+        : await loadHighestNPMVersionMatching(`react@${targetNextPackageJson.peerDependencies['react']}`);
     if ((0, compare_versions_1.compareVersions)(targetNextVersion, '15.0.0-canary') >= 0) {
         await suggestTurbopack(appPackageJson);
     }
     const codemods = await suggestCodemods(installedNextVersion, targetNextVersion);
-    fs_1.default.writeFileSync(appPackageJsonPath, JSON.stringify(appPackageJson, null, 2));
     const packageManager = (0, handle_package_1.getPkgManager)(process.cwd());
+    let shouldRunReactCodemods = false;
+    let shouldRunReactTypesCodemods = false;
+    let execCommand = 'npx';
+    // The following React codemods are for React 19
+    if (!shouldStayOnReact18 &&
+        (0, compare_versions_1.compareVersions)(targetReactVersion, '19.0.0-beta.0') >= 0) {
+        shouldRunReactCodemods = await suggestReactCodemods();
+        shouldRunReactTypesCodemods = await suggestReactTypesCodemods();
+        const execCommandMap = {
+            yarn: 'yarn dlx',
+            pnpm: 'pnpx',
+            bun: 'bunx',
+            npm: 'npx',
+        };
+        execCommand = execCommandMap[packageManager];
+    }
+    fs_1.default.writeFileSync(appPackageJsonPath, JSON.stringify(appPackageJson, null, 2));
     const nextDependency = `next@${targetNextVersion}`;
     const reactDependencies = [
         `react@${targetReactVersion}`,
@@ -92,6 +133,23 @@ async function runUpgrade(revision, options) {
     for (const codemod of codemods) {
         await (0, transform_1.runTransform)(codemod, process.cwd(), { force: true, verbose });
     }
+    // To reduce user-side burden of selecting which codemods to run as it needs additional
+    // understanding of the codemods, we run all of the applicable codemods.
+    if (shouldRunReactCodemods) {
+        // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#run-all-react-19-codemods
+        (0, child_process_1.execSync)(
+        // `--no-interactive` skips the interactive prompt that asks for confirmation
+        // https://github.com/codemod-com/codemod/blob/c0cf00d13161a0ec0965b6cc6bc5d54076839cc8/apps/cli/src/flags.ts#L160
+        `${execCommand} codemod@latest react/19/migration-recipe --no-interactive`, { stdio: 'inherit' });
+    }
+    if (shouldRunReactTypesCodemods) {
+        // https://react.dev/blog/2024/04/25/react-19-upgrade-guide#typescript-changes
+        // `--yes` skips prompts and applies all codemods automatically
+        // https://github.com/eps1lon/types-react-codemod/blob/8463103233d6b70aad3cd6bee1814001eae51b28/README.md?plain=1#L52
+        (0, child_process_1.execSync)(`${execCommand} types-react-codemod@latest --yes preset-19 .`, {
+            stdio: 'inherit',
+        });
+    }
     console.log(); // new line
     if (codemods.length > 0) {
         console.log(`${picocolors_1.default.green('✔')} Codemods have been applied successfully.`);
@@ -110,6 +168,18 @@ function getInstalledNextVersion() {
         });
     }
 }
+function getInstalledReactVersion() {
+    try {
+        return require(require.resolve('react/package.json', {
+            paths: [process.cwd()],
+        })).version;
+    }
+    catch (error) {
+        throw new Error(`Failed to detect the installed React version in "${process.cwd()}".\nIf you're working in a monorepo, please run this command from the Next.js app directory.`, {
+            cause: error,
+        });
+    }
+}
 /*
  * Heuristics are used to determine whether to Turbopack is enabled or not and
  * to determine how to update the dev script.
@@ -176,4 +246,26 @@ async function suggestCodemods(initialNextVersion, targetNextVersion) {
     }, { onCancel: utils_1.onCancel });
     return codemods;
 }
+async function suggestReactCodemods() {
+    const { runReactCodemod } = await (0, prompts_1.default)({
+        type: 'toggle',
+        name: 'runReactCodemod',
+        message: 'Would you like to run the React 19 upgrade codemod?',
+        initial: true,
+        active: 'Yes',
+        inactive: 'No',
+    }, { onCancel: utils_1.onCancel });
+    return runReactCodemod;
+}
+async function suggestReactTypesCodemods() {
+    const { runReactTypesCodemod } = await (0, prompts_1.default)({
+        type: 'toggle',
+        name: 'runReactTypesCodemod',
+        message: 'Would you like to run the React 19 Types upgrade codemod?',
+        initial: true,
+        active: 'Yes',
+        inactive: 'No',
+    }, { onCancel: utils_1.onCancel });
+    return runReactTypesCodemod;
+}
 //# sourceMappingURL=upgrade.js.map

package/lib/cra-to-next/global-css-transform.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.globalCssContext = void 0;
 exports.default = transformer;
 const path_1 = __importDefault(require("path"));
+const parser_1 = require("../parser");
 exports.globalCssContext = {
     cssImports: new Set(),
     reactSvgImports: new Set(),
 };
 const globalStylesRegex = /(?<!\.module)\.(css|scss|sass)$/i;
-function transformer(file, api, options) {
-    const j = api.jscodeshift.withParser('tsx');
+function transformer(file, _api, options) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     let hasModifications = false;
     root

package/lib/cra-to-next/index-to-component.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.indexContext = void 0;
 exports.default = transformer;
+const parser_1 = require("../parser");
 exports.indexContext = {
     multipleRenderRoots: false,
     nestedRender: false,
 };
-function transformer(file, api, options) {
-    const j = api.jscodeshift.withParser('tsx');
+function transformer(file, _api, options) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     let hasModifications = false;
     let foundReactRender = 0;

package/lib/parser.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createParserFromPath = createParserFromPath;
+const jscodeshift_1 = __importDefault(require("jscodeshift"));
+const babylon_1 = __importDefault(require("jscodeshift/parser/babylon"));
+const tsOptions_1 = __importDefault(require("jscodeshift/parser/tsOptions"));
+const dtsOptions = {
+    ...tsOptions_1.default,
+    plugins: [
+        ...tsOptions_1.default.plugins.filter((plugin) => plugin !== 'typescript'),
+        ['typescript', { dts: true }],
+    ],
+};
+function createParserFromPath(filePath) {
+    const isDeclarationFile = /\.d\.(m|c)?ts$/.test(filePath);
+    if (isDeclarationFile) {
+        return jscodeshift_1.default.withParser((0, babylon_1.default)(dtsOptions));
+    }
+    // jsx is allowed in .js files, feed them into the tsx parser.
+    // tsx parser :.js, .jsx, .tsx
+    // ts parser: .ts, .mts, .cts
+    const isTsFile = /\.(m|c)?.ts$/.test(filePath);
+    return isTsFile ? jscodeshift_1.default.withParser('ts') : jscodeshift_1.default.withParser('tsx');
+}
+//# sourceMappingURL=parser.js.map

package/lib/run-jscodeshift.js

@@ -14,10 +14,6 @@ function runJscodeshift(transformerPath, flags, files) {
             '**/node_modules/**',
             '**/.next/**',
             '**/build/**',
-            // type files
-            '**/*.d.ts',
-            '**/*.d.cts',
-            '**/*.d.mts',
             // test files
             '**/*.test.*',
             '**/*.spec.*',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "15.0.0-canary.183",
+  "version": "15.0.0-canary.184",
   "license": "MIT",
   "repository": {
     "type": "git",

package/transforms/add-missing-react-import.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
+const parser_1 = require("../lib/parser");
 function addReactImport(j, root) {
     // We create an import specifier, this is the value of an import, eg:
     // import React from 'react'
@@ -34,8 +35,8 @@ function addReactImport(j, root) {
         node.value.body.unshift(ReactImport);
     });
 }
-function transformer(file, api, options) {
-    const j = api.jscodeshift.withParser('tsx');
+function transformer(file, _api, options) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     const hasReactImport = (r) => {
         return (r.find(j.ImportDefaultSpecifier, {

package/transforms/app-dir-runtime-config-experimental-edge.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
-function transformer(file, api) {
+const parser_1 = require("../lib/parser");
+function transformer(file, _api) {
     if (process.env.NODE_ENV !== 'test' &&
         !/[/\\]app[/\\].*?(page|layout|route)\.[^/\\]+$/.test(file.path)) {
         return file.source;
     }
-    const j = api.jscodeshift.withParser('tsx');
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     const runtimeExport = root.find(j.ExportNamedDeclaration, {
         declaration: {

package/transforms/built-in-next-font.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
-function transformer(file, api, options) {
-    const j = api.jscodeshift.withParser('tsx');
+const parser_1 = require("../lib/parser");
+function transformer(file, _api, options) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     let hasChanges = false;
     // Before: import { ... } from '@next/font'

package/transforms/lib/async-request-api/next-async-dynamic-api.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformDynamicAPI = transformDynamicAPI;
 const utils_1 = require("./utils");
+const parser_1 = require("../../../lib/parser");
 const DYNAMIC_IMPORT_WARN_COMMENT = ` Next.js Dynamic Async API Codemod: The APIs under 'next/headers' are async now, need to be manually awaited. `;
 function findDynamicImportsAndComment(root, j) {
     let modified = false;
@@ -22,9 +23,9 @@ function findDynamicImportsAndComment(root, j) {
     });
     return modified;
 }
-function transformDynamicAPI(source, api, filePath) {
+function transformDynamicAPI(source, _api, filePath) {
     const isEntryFile = utils_1.NEXTJS_ENTRY_FILES.test(filePath);
-    const j = api.jscodeshift.withParser('tsx');
+    const j = (0, parser_1.createParserFromPath)(filePath);
     const root = j(source);
     let modified = false;
     // Check if 'use' from 'react' needs to be imported

package/transforms/lib/async-request-api/next-async-dynamic-prop.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformDynamicProps = transformDynamicProps;
 const utils_1 = require("./utils");
+const parser_1 = require("../../../lib/parser");
 const PAGE_PROPS = 'props';
 function findFunctionBody(path) {
     let functionBody = path.node.body;
@@ -244,14 +245,14 @@ function modifyTypes(paramTypeAnnotation, propsIdentifier, root, j) {
     }
     return modified;
 }
-function transformDynamicProps(source, api, filePath) {
+function transformDynamicProps(source, _api, filePath) {
     const isEntryFile = utils_1.NEXTJS_ENTRY_FILES.test(filePath);
     if (!isEntryFile) {
         return null;
     }
     let modified = false;
     let modifiedPropArgument = false;
-    const j = api.jscodeshift.withParser('tsx');
+    const j = (0, parser_1.createParserFromPath)(filePath);
     const root = j(source);
     // Check if 'use' from 'react' needs to be imported
     let needsReactUseImport = false;

package/transforms/metadata-to-viewport-export.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
-function transformer(file, api) {
-    const j = api.jscodeshift;
+const parser_1 = require("../lib/parser");
+function transformer(file, _api) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     // Find the metadata export
     const metadataExport = root.find(j.ExportNamedDeclaration, {

package/transforms/name-default-component.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 const path_1 = require("path");
+const parser_1 = require("../lib/parser");
 const camelCase = (value) => {
     const val = value.replace(/[-_\s.]+(.)?/g, (_match, chr) => chr ? chr.toUpperCase() : '');
     return val.slice(0, 1).toUpperCase() + val.slice(1);
 };
 const isValidIdentifier = (value) => /^[a-zA-ZÀ-ÿ][0-9a-zA-ZÀ-ÿ]+$/.test(value);
-function transformer(file, api, options) {
-    const j = api.jscodeshift.withParser('tsx');
+function transformer(file, _api, options) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     let hasModifications;
     const returnsJSX = (node) => node.type === 'JSXElement' ||

package/transforms/new-link.js

@@ -3,8 +3,9 @@
 // x-ref: https://github.com/facebook/jscodeshift/issues/534
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
-function transformer(file, api) {
-    const j = api.jscodeshift.withParser('tsx');
+const parser_1 = require("../lib/parser");
+function transformer(file, _api) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const $j = j(file.source);
     return $j
         .find(j.ImportDeclaration, { source: { value: 'next/link' } })

package/transforms/next-dynamic-access-named-export.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
-function transformer(file, api) {
-    const j = api.jscodeshift;
+const parser_1 = require("../lib/parser");
+function transformer(file, _api) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     // Find the import declaration for 'next/dynamic'
     const dynamicImportDeclaration = root.find(j.ImportDeclaration, {

package/transforms/next-image-experimental.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
 const path_1 = require("path");
 const fs_1 = require("fs");
+const parser_1 = require("../lib/parser");
 function findAndReplaceProps(j, root, tagName) {
     const layoutToStyle = {
         intrinsic: { maxWidth: '100%', height: 'auto' },
@@ -188,8 +189,8 @@ function nextConfigTransformer(j, root, appDir) {
     });
     return root;
 }
-function transformer(file, api, options) {
-    const j = api.jscodeshift.withParser('tsx');
+function transformer(file, _api, options) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     const parsed = (0, path_1.parse)(file.path || '/');
     const isConfig = parsed.base === 'next.config.js' ||

package/transforms/next-image-to-legacy-image.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
-function transformer(file, api, options) {
-    const j = api.jscodeshift.withParser('tsx');
+const parser_1 = require("../lib/parser");
+function transformer(file, _api, options) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     const root = j(file.source);
     // Before: import Image from "next/image"
     //  After: import Image from "next/legacy/image"

package/transforms/next-og-import.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = transformer;
+const parser_1 = require("../lib/parser");
 const importToChange = 'ImageResponse';
-function transformer(file, api) {
-    const j = api.jscodeshift;
+function transformer(file, _api) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
     // Find import declarations that match the pattern
     file.source = j(file.source)
         .find(j.ImportDeclaration, {

package/transforms/next-request-geo-ip.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
+const parser_1 = require("../lib/parser");
 const GEO = 'geo';
 const IP = 'ip';
 const GEOLOCATION = 'geolocation';
 const IP_ADDRESS = 'ipAddress';
 const GEO_TYPE = 'Geo';
-function default_1(fileInfo, api) {
-    const j = api.jscodeshift.withParser('tsx');
-    const root = j(fileInfo.source);
+function default_1(file, _api) {
+    const j = (0, parser_1.createParserFromPath)(file.path);
+    const root = j(file.source);
     if (!root.length) {
-        return fileInfo.source;
+        return file.source;
     }
     const nextReqType = root
         .find(j.FunctionDeclaration)
@@ -59,7 +60,7 @@ function default_1(fileInfo, api) {
         needImportGeoType ||
         hasChangedIpType;
     if (!needChanges) {
-        return fileInfo.source;
+        return file.source;
     }
     // Even if there was a change above, if there's an existing import,
     // we don't need to import them again.