create-plasmic-app 0.0.168 → 0.0.170

package/dist/utils/npm-utils.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.detectPackageManager = exports.installUpgrade = exports.spawn = exports.checkEngineStrict = exports.updateNotify = void 0;
+exports.initYarnBerryProject = exports.packageManagerExec = exports.packageManagerCommand = exports.resolvePackageManager = exports.installUpgrade = exports.spawn = exports.checkEngineStrict = exports.updateNotify = void 0;
 /*eslint
 @typescript-eslint/no-var-requires: 0,
 */
@@ -97,7 +97,7 @@ exports.spawn = spawn;
  * @param opts
  * @returns
  */
-function installUpgrade(pkg, opts = {}) {
+function installUpgrade(pkg, opts) {
     return __awaiter(this, void 0, void 0, function* () {
         const cmd = installCommand(pkg, opts);
         const r = yield spawn(cmd, opts.workingDir);
@@ -118,8 +118,8 @@ exports.installUpgrade = installUpgrade;
  * @param opts
  * @returns
  */
-function installCommand(pkg, opts = {}) {
-    const mgr = detectPackageManager(opts.workingDir);
+function installCommand(pkg, opts) {
+    const mgr = opts.packageManager;
     if (mgr === "yarn") {
         if (opts.global) {
             return `yarn global add ${pkg}`;
@@ -131,6 +131,17 @@ function installCommand(pkg, opts = {}) {
             return `yarn add --ignore-scripts -W ${pkg}`;
         }
     }
+    else if (mgr === "yarn2") {
+        if (opts.global) {
+            return `npm install -g ${pkg}`;
+        }
+        else if (opts.dev) {
+            return `yarn add -D ${pkg}`;
+        }
+        else {
+            return `yarn add ${pkg}`;
+        }
+    }
     else if (mgr === "pnpm") {
         if (opts.global) {
             return `pnpm add -g ${pkg}`;
@@ -155,25 +166,59 @@ function installCommand(pkg, opts = {}) {
     }
 }
 /**
- * Detect if you should use `npm` or `yarn`
- * @param dir
- * @returns
+ * The package manager to install with: the one requested, else the one we were run
+ * with. `npx` overwrites npm_config_user_agent, so this must be read before spawning
+ * nested create commands.
  */
-function detectPackageManager(dir) {
-    // We should look only inside the directory instead of looking to the ancestors
-    // with findupSync, the reason for this is that the current gatsby template
-    // uses npm, so if the user has some yarn.lock in a parent directory it's
-    // going to run yarn commands, this is going to trigger an error with sharp
-    const yarnLock = (0, fs_1.existsSync)(path_1.default.join(dir ? dir : "", "yarn.lock"));
-    const pnpmLock = (0, fs_1.existsSync)(path_1.default.join(dir ? dir : "", "pnpm-lock.yaml"));
-    if (yarnLock) {
-        return "yarn";
+function resolvePackageManager(requested) {
+    var _a;
+    if (requested) {
+        return requested === "yarn"
+            ? yarnVariant(installedYarnVersion())
+            : requested;
     }
-    else if (pnpmLock) {
-        return "pnpm";
+    const [name, version] = ((_a = process.env.npm_config_user_agent) !== null && _a !== void 0 ? _a : "")
+        .split(" ")[0]
+        .split("/");
+    if (name === "yarn") {
+        return yarnVariant(version);
     }
-    else {
-        return "npm";
+    return name === "pnpm" ? "pnpm" : "npm";
+}
+exports.resolvePackageManager = resolvePackageManager;
+function yarnVariant(version) {
+    const parsed = version ? semver.coerce(version) : null;
+    return parsed && parsed.major >= 2 ? "yarn2" : "yarn";
+}
+function installedYarnVersion() {
+    try {
+        return execa.commandSync("yarn --version").stdout.trim();
+    }
+    catch (_a) {
+        return undefined;
     }
 }
-exports.detectPackageManager = detectPackageManager;
+/** Scaffolders and run scripts only know the `yarn` command. */
+function packageManagerCommand(mgr) {
+    return mgr === "yarn2" ? "yarn" : mgr;
+}
+exports.packageManagerCommand = packageManagerCommand;
+/** Run a locally installed bin. `npx` can't see Yarn Berry's PnP installs. */
+function packageManagerExec(mgr) {
+    const cmd = packageManagerCommand(mgr);
+    return cmd === "yarn" ? "yarn" : cmd === "pnpm" ? "pnpm exec" : "npx";
+}
+exports.packageManagerExec = packageManagerExec;
+/**
+ * Make a freshly scaffolded app its own Yarn Berry project. Without a lockfile Berry
+ * claims the app for the nearest ancestor project, and its default PnP linker can't
+ * load CommonJS from Node 24's ESM resolver (EBADF), which breaks every framework we
+ * scaffold. Must run before anything invokes yarn in `projectPath`.
+ */
+function initYarnBerryProject(projectPath) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, "yarn.lock"), "");
+        yield fs_1.promises.writeFile(path_1.default.join(projectPath, ".yarnrc.yml"), "nodeLinker: node-modules\n");
+    });
+}
+exports.initYarnBerryProject = initYarnBerryProject;

package/dist/utils/strategy.d.ts

@@ -1,9 +1,11 @@
-import { JsOrTs, PlatformOptions, SchemeType } from "./types";
+import { JsOrTs, PackageManagerType, PlatformOptions, SchemeType } from "./types";
 export interface CreateArgs {
     projectPath: string;
+    projectId: string;
     template?: string;
     jsOrTs: JsOrTs;
     platformOptions: PlatformOptions;
+    packageManager: PackageManagerType;
 }
 export interface ConfigArgs {
     projectId: string;
@@ -20,6 +22,7 @@ export interface GenerateFilesArgs {
     projectId: string;
     projectApiToken: string | undefined;
     platformOptions: PlatformOptions;
+    packageManager: PackageManagerType;
 }
 export interface BuildArgs {
     projectPath: string;
@@ -29,6 +32,7 @@ export interface InstallArgs {
     scheme: SchemeType;
     projectPath: string;
     jsOrTs: JsOrTs;
+    packageManager: PackageManagerType;
 }
 export interface CPAStrategy {
     create: (args: CreateArgs) => Promise<void>;

package/dist/utils/types.d.ts

@@ -6,6 +6,7 @@ export type PlatformOptions = {
     };
 };
 export type SchemeType = "codegen" | "loader";
+export type PackageManagerType = "npm" | "yarn" | "yarn2" | "pnpm";
 export type PlasmicCssImport = {
     projectId: string;
     importPath: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.168",
+  "version": "0.0.170",
   "description": "Create Plasmic-powered React apps",
   "homepage": "https://www.plasmic.app",
   "repository": {
@@ -26,7 +26,6 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@types/findup-sync": "^2.0.2",
     "@types/glob": "^7.2.0",
     "@types/inquirer": "^8.2.13",
     "@types/jest": "^26.0.24",
@@ -43,7 +42,6 @@
     "@sentry/node": "^6.2.2",
     "chalk": "^4.1.0",
     "execa": "^5.0.0",
-    "findup-sync": "^4.0.0",
     "glob": "^7.1.6",
     "inquirer": "^8.2.7",
     "lodash": "^4.17.21",
@@ -53,5 +51,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.2"
   },
-  "gitHead": "f63ae177f15f845faf191d62b25fc3e3e3cfdb95"
+  "gitHead": "8ab1bc413667e338190dcfc7d072de0d1eefe50f"
 }

package/run-cpa.ts

@@ -3,7 +3,11 @@ import * as inquirer from "inquirer";
 import * as path from "path";
 import yargs from "yargs";
 import { spawnOrFail } from "./src/utils/cmd-utils";
-import { PlatformType, SchemeType } from "./src/utils/types";
+import {
+  PackageManagerType,
+  PlatformType,
+  SchemeType,
+} from "./src/utils/types";
 
 // https://studio.plasmic.app/projects/47tFXWjN2C4NyHFGGpaYQ3
 const projectId = "47tFXWjN2C4NyHFGGpaYQ3";
@@ -60,12 +64,17 @@ async function run() {
     `Runs create-plasmic-app with predefined sets of args for you.
 
 Valid arg sets:\n\tall\n\t${allArgSetNames.join("\n\t")}`,
-    (yargs2) => yargs2
+    (yargs2) =>
+      yargs2.option("package-manager", {
+        describe: "Package manager to scaffold and build with",
+        choices: ["npm", "yarn", "pnpm"],
+        default: "npm",
+      })
   );
 
-  const cliArgSetNames = yargsCommand.strict().argv["arg-sets"] as
-    | string[]
-    | undefined;
+  const cliArgv = yargsCommand.strict().argv;
+  const packageManager = cliArgv["package-manager"] as PackageManagerType;
+  const cliArgSetNames = cliArgv["arg-sets"] as string[] | undefined;
 
   // If arg sets were not passed in via CLI args, prompt for them.
   const selectedArgSetNames =
@@ -123,11 +132,13 @@ Valid arg sets:\n\tall\n\t${allArgSetNames.join("\n\t")}`,
       `--scheme=${argSet.scheme}`,
       `--typescript=${argSet.typescript}`,
       `--projectId=${projectId}`,
+      `--packageManager=${packageManager}`,
     ].join(" ");
 
     const cpa = path.resolve("dist/index.js");
     // this probably only works on *nix systems, sorry :(
-    const cmd = `mkdir -p ${tmpOutDir} && cd ${tmpOutDir} && node ${cpa} ${projectName} ${options} && cd ${projectName} && yarn build`;
+    const runCmd = packageManager === "yarn" ? "yarn" : `${packageManager} run`;
+    const cmd = `mkdir -p ${tmpOutDir} && cd ${tmpOutDir} && node ${cpa} ${projectName} ${options} && cd ${projectName} && ${runCmd} build`;
     await spawnOrFail(cmd);
 
     const tmpProjectDir = path.join(tmpOutDir, projectName);

package/src/gatsby/gatsby.ts

@@ -9,7 +9,7 @@ import {
   getPlasmicConfig,
 } from "../utils/file-utils";
 import { ensure } from "../utils/lang-utils";
-import { installUpgrade } from "../utils/npm-utils";
+import { initYarnBerryProject, installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy } from "../utils/strategy";
 import {
   GATSBY_404,
@@ -29,7 +29,7 @@ export const GATSBY_TEMPLATES = {
 
 export const gatsbyStrategy: CPAStrategy = {
   create: async (args) => {
-    const { projectPath, template, jsOrTs } = args;
+    const { projectPath, projectId, template, jsOrTs, packageManager } = args;
     if (template) {
       console.log(
         `Warning: Ignoring template '${template}' (argument is not supported by Gatsby).`
@@ -38,24 +38,47 @@ export const gatsbyStrategy: CPAStrategy = {
     const gatsbyTemplate = GATSBY_TEMPLATES[jsOrTs];
     const createCommand = `git clone ${gatsbyTemplate} ${projectPath} --recursive --depth 1 --quiet`;
     await spawnOrFail(`${createCommand}`);
-    // Remove .git and LICENSE so that we don't generate linked outputs
-    await spawnOrFail(`rm -rf ${projectPath}/.git`);
-    await spawnOrFail(`rm -rf ${projectPath}/LICENSE`);
+    // Remove package-lock.json since the user might be using a different package manager
+    await spawnOrFail(
+      `rm -rf ${projectPath}/.git ${projectPath}/LICENSE ${projectPath}/package-lock.json`
+    );
+
+    // Rename before installing; Yarn Berry rejects `yarn run` once the lockfile's
+    // workspace name no longer matches package.json
+    const packageJsonPath = path.join(projectPath, "package.json");
+    const packageJsonObject = JSON.parse(
+      await fs.readFile(packageJsonPath, "utf8")
+    );
+    packageJsonObject.name = path.basename(projectPath);
+    packageJsonObject.description = `Plasmic app for ${projectId}`;
+    delete packageJsonObject.license;
+    delete packageJsonObject.author;
+    await fs.writeFile(
+      packageJsonPath,
+      JSON.stringify(packageJsonObject, null, 2)
+    );
+
+    if (packageManager === "yarn2") {
+      await initYarnBerryProject(projectPath);
+    }
   },
-  installDeps: async ({ projectPath, scheme, jsOrTs }) => {
+  installDeps: async ({ projectPath, scheme, jsOrTs, packageManager }) => {
     const installedHelmet = await installUpgrade("react-helmet", {
       workingDir: projectPath,
+      packageManager,
     });
     const installedHelmetTypes =
       jsOrTs === "js" ||
       (await installUpgrade("@types/react-helmet", {
         workingDir: projectPath,
         dev: true,
+        packageManager,
       }));
     const installedHelmetPlugin = await installUpgrade(
       "gatsby-plugin-react-helmet",
       {
         workingDir: projectPath,
+        packageManager,
       }
     );
     if (!installedHelmet || !installedHelmetPlugin || !installedHelmetTypes) {
@@ -65,27 +88,14 @@ export const gatsbyStrategy: CPAStrategy = {
     if (scheme === "loader") {
       return await installUpgrade("@plasmicapp/loader-gatsby", {
         workingDir: projectPath,
+        packageManager,
       });
     } else {
-      return await installCodegenDeps({ projectPath });
+      return await installCodegenDeps({ projectPath, packageManager });
     }
   },
   overwriteConfig: async (args) => {
     const { projectId, projectPath, projectApiToken, jsOrTs, scheme } = args;
-    const packageName = path.basename(projectPath);
-
-    // Update package.json: adding name and description, removing license and author
-    const packageJsonPath = path.join(projectPath, "package.json");
-    const packageJson = await fs.readFile(packageJsonPath, "utf8");
-    const packageJsonObject = JSON.parse(packageJson);
-    packageJsonObject.name = packageName;
-    packageJsonObject.description = `Plasmic app for ${projectId}`;
-    delete packageJsonObject.license;
-    delete packageJsonObject.author;
-    await fs.writeFile(
-      packageJsonPath,
-      JSON.stringify(packageJsonObject, null, 2)
-    );
 
     if (scheme === "loader") {
       const gatsbyConfigFile = path.join(
@@ -105,7 +115,14 @@ export const gatsbyStrategy: CPAStrategy = {
   generateFiles: async (args) => {
     // in gatsby we can delete all existing pages/components, since all pages are going
     // to be handled by templates/defaultPlasmicPage
-    const { projectId, projectApiToken, projectPath, jsOrTs, scheme } = args;
+    const {
+      projectId,
+      projectApiToken,
+      projectPath,
+      jsOrTs,
+      scheme,
+      packageManager,
+    } = args;
 
     deleteGlob(path.join(projectPath, "src/@(pages|components|templates)/*.*"));
 
@@ -157,6 +174,7 @@ export const gatsbyStrategy: CPAStrategy = {
         projectId,
         projectApiToken,
         projectPath,
+        packageManager,
       });
 
       // Special case: remove all Gatsby components (due to conflicting file names)

package/src/index.ts

@@ -10,6 +10,7 @@ import { ensure } from "./utils/lang-utils";
 import { checkEngineStrict, updateNotify } from "./utils/npm-utils";
 import {
   JsOrTs,
+  PackageManagerType,
   PlatformOptions,
   PlatformType,
   SchemeType,
@@ -64,6 +65,10 @@ const argv = yargs
     describe: "(Next.js) Use app directory?",
     boolean: true,
   })
+  .option("packageManager", {
+    describe: "Package manager to scaffold and install with",
+    choices: ["", "npm", "yarn", "pnpm"],
+  })
   .strict()
   .help("h")
   .alias("h", "help")
@@ -256,6 +261,9 @@ What is the URL of your project?`,
 
   const template = argv["template"];
   const projectApiToken = argv["projectApiToken"];
+  const packageManager = (argv["packageManager"] || undefined) as
+    | PackageManagerType
+    | undefined;
 
   // Set the metadata environment variable to tag the future Segment codegen event
   setMetadataEnv({
@@ -270,6 +278,7 @@ What is the URL of your project?`,
     jsOrTs,
     projectApiToken,
     template,
+    packageManager,
   });
 }
 

package/src/lib.ts

@@ -3,10 +3,15 @@ import chalk from "chalk";
 import * as path from "upath";
 import validateProjectName from "validate-npm-package-name";
 import { ensureTsconfig, overwriteReadme } from "./utils/file-utils";
-import { detectPackageManager } from "./utils/npm-utils";
+import {
+  packageManagerCommand,
+  packageManagerExec,
+  resolvePackageManager,
+} from "./utils/npm-utils";
 import { CPAStrategy } from "./utils/strategy";
 import {
   JsOrTs,
+  PackageManagerType,
   PlatformOptions,
   PlatformType,
   SchemeType,
@@ -34,6 +39,7 @@ export interface CreatePlasmicAppArgs {
   jsOrTs: JsOrTs;
   projectApiToken?: string;
   template?: string;
+  packageManager?: PackageManagerType;
 }
 
 export async function create(args: CreatePlasmicAppArgs): Promise<void> {
@@ -47,6 +53,7 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     template,
   } = args;
   let { projectApiToken } = args;
+  const packageManager = resolvePackageManager(args.packageManager);
   console.log("Let's get started! Here's what we'll do: ");
   console.log("1. Authenticate with Plasmic");
   console.log("2. Create a React/Next/Gatsby repo");
@@ -87,16 +94,18 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
   // Create project using strategy for platform
   await cpaStrategy.create({
     projectPath: resolvedProjectPath,
+    projectId,
     jsOrTs,
     template,
     platformOptions,
+    packageManager,
   });
 
   // Ensure that we have a empty tsconfig and @types packages.
   // Gatsby and Next.js by default support typescript handling internally
   // tsconfig so we don't have to ensure it.
   if (jsOrTs === "ts" && platform === "react") {
-    await ensureTsconfig(resolvedProjectPath);
+    await ensureTsconfig(resolvedProjectPath, packageManager);
   }
 
   // Make sure we have an api token for loader
@@ -113,6 +122,7 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     scheme,
     projectPath: resolvedProjectPath,
     jsOrTs,
+    packageManager,
   });
 
   if (!installResult) {
@@ -137,14 +147,14 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     projectId,
     projectApiToken,
     platformOptions,
+    packageManager,
   });
 
   /**
    * INSTRUCT USER ON NEXT STEPS
    */
-  const pkgMgr = detectPackageManager(resolvedProjectPath);
-  const npmRunCmd =
-    pkgMgr === "yarn" ? "yarn" : pkgMgr === "pnpm" ? "pnpm run" : "npm run";
+  const pmCmd = packageManagerCommand(packageManager);
+  const npmRunCmd = pmCmd === "yarn" ? "yarn" : `${pmCmd} run`;
   const command =
     platform === "nextjs"
       ? `${npmRunCmd} dev`
@@ -183,7 +193,9 @@ export async function create(args: CreatePlasmicAppArgs): Promise<void> {
     console.log(
       "To watch for changes in Plasmic components, in a separate terminal run:"
     );
-    console.log(chalk.bold(`npx plasmic watch`));
+    console.log(
+      chalk.bold(`${packageManagerExec(packageManager)} plasmic watch`)
+    );
   }
 }
 

package/src/nextjs/nextjs.ts

@@ -10,7 +10,11 @@ import {
   getPlasmicConfig,
 } from "../utils/file-utils";
 import { ensure } from "../utils/lang-utils";
-import { installUpgrade } from "../utils/npm-utils";
+import {
+  initYarnBerryProject,
+  installUpgrade,
+  packageManagerCommand,
+} from "../utils/npm-utils";
 import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
 import { PlasmicCssImport } from "../utils/types";
 import { makeLayout_app_codegen } from "./templates/app-codegen/layout";
@@ -38,28 +42,40 @@ import {
 
 export const nextjsStrategy: CPAStrategy = {
   create: async (args) => {
-    const { projectPath, template, jsOrTs, platformOptions } = args;
+    const { projectPath, template, jsOrTs, platformOptions, packageManager } =
+      args;
     const typescriptArg = `--${jsOrTs}`;
     const experimentalAppArg = platformOptions.nextjs?.appDir
       ? "--app"
       : "--no-app";
     const templateArg = template ? ` --example ${template}` : "";
+    const isYarnBerry = packageManager === "yarn2";
     // NOTE: Not using create-next-app@latest to keep major version bumps deliberate
     const createCommand =
       `npx create-next-app@16 ${projectPath} ${typescriptArg} ${experimentalAppArg} ${templateArg}` +
-      ` --eslint --no-src-dir  --import-alias "@/*" --no-tailwind`;
+      ` --use-${packageManagerCommand(
+        packageManager
+      )} --eslint --no-src-dir  --import-alias "@/*" --no-tailwind` +
+      // Berry must install into the project we set up below, not the default PnP one
+      (isYarnBerry ? " --skip-install" : "");
 
     // Default Next.js starter already supports Typescript
     // See where we `touch tsconfig.json` later on
     await spawnOrFail(createCommand);
+
+    if (isYarnBerry) {
+      await initYarnBerryProject(projectPath);
+      await spawnOrFail("yarn install", projectPath);
+    }
   },
-  installDeps: async ({ scheme, projectPath }) => {
+  installDeps: async ({ scheme, projectPath, packageManager }) => {
     if (scheme === "loader") {
       return await installUpgrade("@plasmicapp/loader-nextjs", {
         workingDir: projectPath,
+        packageManager,
       });
     } else {
-      return await installCodegenDeps({ projectPath });
+      return await installCodegenDeps({ projectPath, packageManager });
     }
   },
   overwriteConfig: async (args) => {
@@ -129,7 +145,14 @@ a {
 }
 
 async function generateFilesAppDir(args: GenerateFilesArgs) {
-  const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
+  const {
+    projectPath,
+    scheme,
+    jsOrTs,
+    projectId,
+    projectApiToken,
+    packageManager,
+  } = args;
 
   // Delete existing pages
   deleteGlob(path.join(projectPath, "app", "page.*"));
@@ -197,6 +220,7 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       projectId,
       projectApiToken,
       projectPath,
+      packageManager,
     });
 
     // ./app/sitemap.ts
@@ -239,7 +263,14 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
 }
 
 async function generateFilesPagesDir(args: GenerateFilesArgs) {
-  const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
+  const {
+    projectPath,
+    scheme,
+    jsOrTs,
+    projectId,
+    projectApiToken,
+    packageManager,
+  } = args;
 
   // Delete existing pages
   deleteGlob(path.join(projectPath, "pages", "*.*"));
@@ -292,6 +323,7 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
       projectId,
       projectApiToken,
       projectPath,
+      packageManager,
     });
 
     // ./pages/sitemap.xml.ts

package/src/react/react.ts

@@ -9,12 +9,12 @@ import {
   generateWelcomePage,
   getPlasmicConfig,
 } from "../utils/file-utils";
-import { installUpgrade } from "../utils/npm-utils";
+import { initYarnBerryProject, installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy } from "../utils/strategy";
 
 export const reactStrategy: CPAStrategy = {
   create: async (args) => {
-    const { projectPath, jsOrTs } = args;
+    const { projectPath, jsOrTs, packageManager } = args;
     let { template } = args;
 
     /* create-vite package checks if the targetDir doesn't exist then it creates the targetDir in the
@@ -45,14 +45,19 @@ export const reactStrategy: CPAStrategy = {
 
     const templateArg = template ? ` --template ${template}` : "";
     await spawnOrFail(`${createCommand}${templateArg}`);
+
+    if (packageManager === "yarn2") {
+      await initYarnBerryProject(fullProjectPath);
+    }
   },
-  installDeps: async ({ projectPath, scheme }) => {
+  installDeps: async ({ projectPath, scheme, packageManager }) => {
     if (scheme === "loader") {
       return await installUpgrade("@plasmicapp/loader-react", {
         workingDir: projectPath,
+        packageManager,
       });
     } else {
-      return await installCodegenDeps({ projectPath });
+      return await installCodegenDeps({ projectPath, packageManager });
     }
   },
   overwriteConfig: async (args) => {
@@ -81,6 +86,7 @@ export const reactStrategy: CPAStrategy = {
     projectId,
     projectPath,
     jsOrTs,
+    packageManager,
   }) => {
     if (scheme === "loader") {
       // Nothing to do
@@ -92,6 +98,7 @@ export const reactStrategy: CPAStrategy = {
         projectId,
         projectApiToken,
         projectPath,
+        packageManager,
       });
 
       // Pick a page for the entry point App.tsx page