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

package/bin/upgrade.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.runUpgrade = runUpgrade;
 const prompts_1 = __importDefault(require("prompts"));
 const fs_1 = __importDefault(require("fs"));
+const semver_1 = __importDefault(require("semver"));
+const compare_1 = __importDefault(require("semver/functions/compare"));
 const child_process_1 = require("child_process");
 const path_1 = __importDefault(require("path"));
-const compare_versions_1 = require("compare-versions");
 const picocolors_1 = __importDefault(require("picocolors"));
 const handle_package_1 = require("../lib/handle-package");
 const transform_1 = require("./transform");
@@ -49,22 +50,67 @@ async function runUpgrade(revision, options) {
     const installedNextVersion = getInstalledNextVersion();
     console.log(`Current Next.js version: v${installedNextVersion}`);
     const targetNextVersion = targetNextPackageJson.version;
-    if ((0, compare_versions_1.compareVersions)(installedNextVersion, targetNextVersion) >= 0) {
-        console.log(`${picocolors_1.default.green('✓')} Current Next.js version is already on or higher than the target version "v${targetNextVersion}".`);
+    if ((0, compare_1.default)(installedNextVersion, targetNextVersion) === 0) {
+        console.log(`${picocolors_1.default.green('✓')} Current Next.js version is already on the target version "v${targetNextVersion}".`);
         return;
     }
+    if ((0, compare_1.default)(installedNextVersion, targetNextVersion) > 0) {
+        console.log(`${picocolors_1.default.green('✓')} Current Next.js version is 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_1.default)(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']}`);
-    if ((0, compare_versions_1.compareVersions)(targetNextVersion, '15.0.0-canary') >= 0) {
+    const targetReactVersion = shouldStayOnReact18
+        ? '18.3.1'
+        : await loadHighestNPMVersionMatching(`react@${targetNextPackageJson.peerDependencies['react']}`);
+    if ((0, compare_1.default)(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_1.default)(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 +138,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 +173,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.
@@ -149,11 +224,25 @@ async function suggestTurbopack(packageJson) {
         responseCustomDevScript.customDevScript || devScript;
 }
 async function suggestCodemods(initialNextVersion, targetNextVersion) {
-    const initialVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => (0, compare_versions_1.compareVersions)(versionCodemods.version, initialNextVersion) > 0);
+    // Here we suggest pre-released codemods by their "stable" version.
+    // It is because if we suggest by the version range (installed ~ target),
+    // pre-released codemods for the target version are not suggested when upgrading.
+    // Let's say we have a codemod for v15.0.0-canary.x, and we're upgrading from
+    // v15.x -> v15.x. Our initial version is higher than the codemod's version,
+    // so the codemod will not be suggested.
+    // This is not ideal as the codemods for pre-releases are also targeting the major version.
+    // Also, when the user attempts to run the upgrade command twice, and have installed the
+    // target version, the behavior must be idempotent and suggest the codemods including the
+    // pre-releases of the target version.
+    const initial = semver_1.default.parse(initialNextVersion);
+    const initialVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => {
+        const codemod = semver_1.default.parse(versionCodemods.version);
+        return ((0, compare_1.default)(`${codemod.major}.${codemod.minor}.${codemod.patch}`, `${initial.major}.${initial.minor}.${initial.patch}`) >= 0);
+    });
     if (initialVersionIndex === -1) {
         return [];
     }
-    let targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => (0, compare_versions_1.compareVersions)(versionCodemods.version, targetNextVersion) > 0);
+    let targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.findIndex((versionCodemods) => (0, compare_1.default)(versionCodemods.version, targetNextVersion) > 0);
     if (targetVersionIndex === -1) {
         targetVersionIndex = utils_1.TRANSFORMER_INQUIRER_CHOICES.length;
     }
@@ -176,4 +265,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/lib/utils.js

@@ -39,62 +39,57 @@ exports.TRANSFORMER_INQUIRER_CHOICES = [
     {
         title: 'Transform the deprecated automatically injected url property on top level pages to using withRouter',
         value: 'url-to-withrouter',
-        version: '6.0',
+        version: '6.0.0',
     },
     {
         title: 'Transforms the withAmp HOC into Next.js 9 page configuration',
         value: 'withamp-to-config',
-        version: '8.0',
+        version: '8.0.0',
     },
     {
         title: 'Transforms anonymous components into named components to make sure they work with Fast Refresh',
         value: 'name-default-component',
-        version: '9.0',
+        version: '9.0.0',
     },
     {
         title: 'Transforms files that do not import `React` to include the import in order for the new React JSX transform',
         value: 'add-missing-react-import',
-        version: '10.0',
+        version: '10.0.0',
     },
     {
         title: 'Automatically migrates a Create React App project to Next.js (experimental)',
         value: 'cra-to-next',
-        version: '11.0',
+        version: '11.0.0',
     },
     {
         title: 'Ensures your <Link> usage is backwards compatible',
         value: 'new-link',
-        version: '13.0',
+        version: '13.0.0',
     },
     {
         title: 'Dangerously migrates from `next/legacy/image` to the new `next/image` by adding inline styles and removing unused props (experimental)',
         value: 'next-image-experimental',
-        version: '13.0',
+        version: '13.0.0',
     },
     {
         title: 'Safely migrate Next.js 10, 11, 12 applications importing `next/image` to the renamed `next/legacy/image` import in Next.js 13',
         value: 'next-image-to-legacy-image',
-        version: '13.0',
-    },
-    {
-        title: 'Transform App Router Route Segment Config `runtime` value from `experimental-edge` to `edge`',
-        value: 'app-dir-runtime-config-experimental-edge',
-        version: '13.1.2',
+        version: '13.0.0',
     },
     {
         title: 'Uninstall `@next/font` and transform imports to `next/font`',
         value: 'built-in-next-font',
-        version: '13.2',
+        version: '13.2.0',
     },
     {
         title: 'Migrates certain viewport related metadata from the `metadata` export to a new `viewport` export',
         value: 'metadata-to-viewport-export',
-        version: '14.0',
+        version: '14.0.0',
     },
     {
         title: 'Transforms imports from `next/server` to `next/og` for usage of Dynamic OG Image Generation',
         value: 'next-og-import',
-        version: '14.0',
+        version: '14.0.0',
     },
     {
         title: 'Transform `next/dynamic` imports accessing named exports to return an object with a `default` property',
@@ -111,5 +106,10 @@ exports.TRANSFORMER_INQUIRER_CHOICES = [
         value: 'next-async-request-api',
         version: '15.0.0-canary.171',
     },
+    {
+        title: 'Transform App Router Route Segment Config `runtime` value from `experimental-edge` to `edge`',
+        value: 'app-dir-runtime-config-experimental-edge',
+        version: '15.0.0-canary.179',
+    },
 ];
 //# sourceMappingURL=utils.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "15.0.0-canary.183",
+  "version": "15.0.0-canary.185",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -10,14 +10,14 @@
   "dependencies": {
     "cheerio": "1.0.0-rc.9",
     "commander": "12.1.0",
-    "compare-versions": "6.1.1",
     "execa": "4.0.3",
     "find-up": "4.1.0",
     "globby": "11.0.1",
     "is-git-clean": "1.1.0",
     "jscodeshift": "17.0.0",
     "picocolors": "1.0.0",
-    "prompts": "2.4.2"
+    "prompts": "2.4.2",
+    "semver": "7.6.3"
   },
   "files": [
     "transforms/*.js",
@@ -36,6 +36,7 @@
   "devDependencies": {
     "@types/find-up": "4.0.0",
     "@types/jscodeshift": "0.11.0",
-    "@types/prompts": "2.4.2"
+    "@types/prompts": "2.4.2",
+    "@types/semver": "7.3.1"
   }
 }

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,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformDynamicAPI = transformDynamicAPI;
 const utils_1 = require("./utils");
-const DYNAMIC_IMPORT_WARN_COMMENT = ` Next.js Dynamic Async API Codemod: The APIs under 'next/headers' are async now, need to be manually awaited. `;
+const parser_1 = require("../../../lib/parser");
+const DYNAMIC_IMPORT_WARN_COMMENT = ` @next-codemod-error The APIs under 'next/headers' are async now, need to be manually awaited. `;
 function findDynamicImportsAndComment(root, j) {
     let modified = false;
     // find all the dynamic imports of `next/headers`,
@@ -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
@@ -135,12 +136,12 @@ function transformDynamicAPI(source, api, filePath) {
                             needsReactUseImport = true;
                         }
                         else {
-                            const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` Next.js Dynamic Async API Codemod: Manually await this call, if it's a Server Component `);
+                            const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} Manually await this call and refactor the function to be async `);
                             modified ||= casted;
                         }
                     }
                     else {
-                        const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ' Next.js Dynamic Async API Codemod: please manually await this call, codemod cannot transform due to undetermined async scope ');
+                        const casted = castTypesOrAddComment(j, path, originRequestApiName, root, filePath, insertedTypes, ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} please manually await this call, codemod cannot transform due to undetermined async scope `);
                         modified ||= casted;
                     }
                 }

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;
@@ -141,7 +142,7 @@ function commentOnMatchedReExports(root, j) {
                         specifier.exported.name === 'default')) {
                     if (j.Literal.check(path.value.source)) {
                         const localName = specifier.local.name;
-                        const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` Next.js Dynamic Async API Codemod: \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
+                        const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
                         modified ||= commentInserted;
                     }
                     else if (path.value.source === null) {
@@ -154,7 +155,7 @@ function commentOnMatchedReExports(root, j) {
                             return importPath.value.specifiers.some((importSpecifier) => importSpecifier.local.name === localName);
                         });
                         if (importDeclaration.size() > 0) {
-                            const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` Next.js Dynamic Async API Codemod: \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
+                            const commentInserted = (0, utils_1.insertCommentOnce)(specifier, j, ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} \`${localName}\` export is re-exported. Check if this component uses \`params\` or \`searchParams\``);
                             modified ||= commentInserted;
                         }
                     }
@@ -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;
@@ -354,7 +355,7 @@ function transformDynamicProps(source, api, filePath) {
                     // find the argument `currentParam`
                     const args = callExpression.value.arguments;
                     const propPassedAsArg = args.find((arg) => j.Identifier.check(arg) && arg.name === argName);
-                    const comment = ` Next.js Dynamic Async API Codemod: '${argName}' is passed as an argument. Any asynchronous properties of 'props' must be awaited when accessed. `;
+                    const comment = ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} '${argName}' is passed as an argument. Any asynchronous properties of 'props' must be awaited when accessed. `;
                     const inserted = (0, utils_1.insertCommentOnce)(propPassedAsArg, j, comment);
                     modified ||= inserted;
                 });
@@ -697,7 +698,7 @@ function commentSpreadProps(path, propsIdentifierName, j) {
     const objSpreadProperties = functionBodyCollection.find(j.SpreadElement, {
         argument: { name: propsIdentifierName },
     });
-    const comment = ` Next.js Dynamic Async API Codemod: '${propsIdentifierName}' is used with spread syntax (...). Any asynchronous properties of '${propsIdentifierName}' must be awaited when accessed. `;
+    const comment = ` ${utils_1.NEXT_CODEMOD_ERROR_PREFIX} '${propsIdentifierName}' is used with spread syntax (...). Any asynchronous properties of '${propsIdentifierName}' must be awaited when accessed. `;
     // Add comment before it
     jsxSpreadProperties.forEach((spread) => {
         const inserted = (0, utils_1.insertCommentOnce)(spread.value, j, comment);

package/transforms/lib/async-request-api/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TARGET_PROP_NAMES = exports.TARGET_NAMED_EXPORTS = exports.TARGET_ROUTE_EXPORTS = exports.NEXTJS_ENTRY_FILES = void 0;
+exports.TARGET_PROP_NAMES = exports.TARGET_NAMED_EXPORTS = exports.TARGET_ROUTE_EXPORTS = exports.NEXT_CODEMOD_ERROR_PREFIX = exports.NEXTJS_ENTRY_FILES = void 0;
 exports.isFunctionType = isFunctionType;
 exports.isMatchedFunctionExported = isMatchedFunctionExported;
 exports.determineClientDirective = determineClientDirective;
@@ -15,6 +15,8 @@ exports.wrapParentheseIfNeeded = wrapParentheseIfNeeded;
 exports.insertCommentOnce = insertCommentOnce;
 exports.getVariableDeclaratorId = getVariableDeclaratorId;
 exports.NEXTJS_ENTRY_FILES = /([\\/]|^)(page|layout|route|default)\.(t|j)sx?$/;
+exports.NEXT_CODEMOD_ERROR_PREFIX = '@next-codemod-error';
+const NEXT_CODEMOD_IGNORE_ERROR_PREFIX = '@next-codemod-ignore';
 exports.TARGET_ROUTE_EXPORTS = new Set([
     'GET',
     'POST',
@@ -321,15 +323,43 @@ function getFunctionPathFromExportPath(exportPath, j, root, namedExportFilter) {
 function wrapParentheseIfNeeded(hasChainAccess, j, expression) {
     return hasChainAccess ? j.parenthesizedExpression(expression) : expression;
 }
-function insertCommentOnce(node, j, comment) {
-    if (node.comments) {
-        const hasComment = node.comments.some((commentNode) => commentNode.value === comment);
+function existsComment(comments, comment) {
+    const isCodemodErrorComment = comment
+        .trim()
+        .startsWith(exports.NEXT_CODEMOD_ERROR_PREFIX);
+    let hasIgnoreComment = false;
+    let hasComment = false;
+    if (comments) {
+        comments.forEach((commentNode) => {
+            const currentComment = commentNode.value;
+            if (currentComment.trim().startsWith(NEXT_CODEMOD_IGNORE_ERROR_PREFIX)) {
+                hasIgnoreComment = true;
+            }
+            if (currentComment === comment) {
+                hasComment = true;
+            }
+        });
+        // If it's inserting codemod error comment,
+        // check if there's already a @next-codemod-ignore comment.
+        // if ignore comment exists, bypass the comment insertion.
+        if (hasIgnoreComment && isCodemodErrorComment) {
+            return true;
+        }
         if (hasComment) {
-            return false;
+            return true;
         }
     }
-    node.comments = [j.commentBlock(comment), ...(node.comments || [])];
-    return true;
+    return false;
+}
+function insertCommentOnce(node, j, comment) {
+    const hasCommentInInlineComments = existsComment(node.comments, comment);
+    const hasCommentInLeadingComments = existsComment(node.leadingComments, comment);
+    if (!hasCommentInInlineComments && !hasCommentInLeadingComments) {
+        // Always insert into inline comment
+        node.comments = [j.commentBlock(comment), ...(node.comments || [])];
+        return true;
+    }
+    return false;
 }
 function getVariableDeclaratorId(path, j) {
     const parent = path.parentPath;

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.