feat(nuxt): Add import-in-the-middle install step when using pnpm (#727)

* feat(nuxt): Add import-in-the-middle install step when using pnpm

* Add changelog

* Update pnpm docs link

* Update pnpm comment

Author: andreiborza

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- feat(nuxt): Add `import-in-the-middle` install step when using pnpm ([#727](https://github.com/getsentry/sentry-wizard/pull/727))
 - fix(nuxt): Remove unused parameter in sentry-example-api template ([#734](https://github.com/getsentry/sentry-wizard/pull/734))
 
 ## 3.36.0

src/nuxt/nuxt-wizard.ts

@@ -93,7 +93,7 @@ export async function runNuxtWizardWithTelemetry(
 
   const packageManager = await getPackageManager();
 
-  await addNuxtOverrides(packageManager, minVer);
+  await addNuxtOverrides(packageJson, packageManager, minVer);
 
   const sdkAlreadyInstalled = hasPackageInstalled('@sentry/nuxt', packageJson);
   Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);

src/nuxt/sdk-setup.ts

@@ -18,12 +18,15 @@ import {
   abort,
   abortIfCancelled,
   askShouldAddPackageOverride,
+  askShouldInstallPackage,
   featureSelectionPrompt,
+  installPackage,
   isUsingTypeScript,
 } from '../utils/clack-utils';
 import { traceStep } from '../telemetry';
 import { lt, SemVer } from 'semver';
-import { PackageManager } from '../utils/package-manager';
+import { PackageManager, PNPM } from '../utils/package-manager';
+import { hasPackageInstalled, PackageDotJson } from '../utils/package-json';
 
 const possibleNuxtConfig = [
   'nuxt.config.js',
@@ -212,9 +215,12 @@ export async function createConfigFiles(dsn: string) {
 }
 
 export async function addNuxtOverrides(
+  packageJson: PackageDotJson,
   packageManager: PackageManager,
   nuxtMinVer: SemVer | null,
 ) {
+  const isPNPM = PNPM.detect();
+
   const overrides = [
     {
       pkgName: 'nitropack',
@@ -230,9 +236,17 @@ export async function addNuxtOverrides(
   ];
 
   clack.log.warn(
-    `To ensure Sentry can properly instrument your code it needs to add version overrides for some Nuxt dependencies.\n\nFor more info see: ${chalk.cyan(
+    `To ensure Sentry can properly instrument your code it needs to add version overrides for some Nuxt dependencies${
+      isPNPM ? ` and install ${chalk.cyan('import-in-the-middle')}.` : '.'
+    }\n\nFor more info see: ${chalk.cyan(
       'https://github.com/getsentry/sentry-javascript/issues/14514',
-    )}`,
+    )}${
+      isPNPM
+        ? `\n\nand ${chalk.cyan(
+            'https://docs.sentry.io/platforms/javascript/guides/nuxt/troubleshooting/#pnpm-dev-cannot-find-package-import-in-the-middle',
+          )}`
+        : ''
+    }`,
   );
 
   for (const { pkgName, pkgVersion } of overrides) {
@@ -245,4 +259,26 @@ export async function addNuxtOverrides(
       await packageManager.addOverride(pkgName, pkgVersion);
     }
   }
+
+  if (PNPM.detect()) {
+    // For pnpm, we want to install iitm
+    // See: https://docs.sentry.io/platforms/javascript/guides/nuxt/troubleshooting/#pnpm-dev-cannot-find-package-import-in-the-middle
+    const iitmAlreadyInstalled = hasPackageInstalled(
+      'import-in-the-middle',
+      packageJson,
+    );
+    Sentry.setTag('iitm-already-installed', iitmAlreadyInstalled);
+
+    const shouldInstallIitm = await askShouldInstallPackage(
+      'import-in-the-middle',
+    );
+
+    if (shouldInstallIitm) {
+      await installPackage({
+        packageName: 'import-in-the-middle',
+        alreadyInstalled: iitmAlreadyInstalled,
+        packageManager,
+      });
+    }
+  }
 }

src/utils/clack-utils.ts

@@ -1492,6 +1492,18 @@ export async function featureSelectionPrompt<F extends ReadonlyArray<Feature>>(
   });
 }
 
+export async function askShouldInstallPackage(
+  pkgName: string,
+): Promise<boolean> {
+  return traceStep(`ask-install-package`, () =>
+    abortIfCancelled(
+      clack.confirm({
+        message: `Do you want to install ${chalk.cyan(pkgName)}?`,
+      }),
+    ),
+  );
+}
+
 export async function askShouldAddPackageOverride(
   pkgName: string,
   pkgVersion: string,