Merge pull request storybookjs#24945 from storybookjs/try-to-fix-ci

Build: Use Vite plugin resolution workaround in CI

code/lib/cli/src/js-package-manager/NPMProxy.ts

@@ -184,7 +184,7 @@ export class NPMProxy extends JsPackageManager {
       await this.executeCommand({
         command: 'npm',
         args: ['install', ...args, ...this.getInstallArgs()],
-        stdio: ['ignore', logStream, logStream],
+        stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream],
       });
     } catch (err) {
       const stdout = await readLogFile();

code/lib/cli/src/js-package-manager/PNPMProxy.ts

@@ -195,7 +195,7 @@ export class PNPMProxy extends JsPackageManager {
       await this.executeCommand({
         command: 'pnpm',
         args: ['add', ...args, ...this.getInstallArgs()],
-        stdio: ['ignore', logStream, logStream],
+        stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream],
       });
     } catch (err) {
       const stdout = await readLogFile();

code/lib/cli/src/js-package-manager/Yarn1Proxy.ts

@@ -134,7 +134,7 @@ export class Yarn1Proxy extends JsPackageManager {
       await this.executeCommand({
         command: 'yarn',
         args: ['add', ...this.getInstallArgs(), ...args],
-        stdio: ['ignore', logStream, logStream],
+        stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream],
       });
     } catch (err) {
       const stdout = await readLogFile();

code/lib/cli/src/js-package-manager/Yarn2Proxy.ts

@@ -210,7 +210,7 @@ export class Yarn2Proxy extends JsPackageManager {
       await this.executeCommand({
         command: 'yarn',
         args: ['add', ...this.getInstallArgs(), ...args],
-        stdio: ['ignore', logStream, logStream],
+        stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream],
       });
     } catch (err) {
       const stdout = await readLogFile();

code/package.json

@@ -212,7 +212,7 @@
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/experimental-utils": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@vitejs/plugin-react": "^3.0.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^9.1.2",
     "chromatic": "7.1.0",

code/yarn.lock

@@ -1687,7 +1687,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-development@npm:^7.16.7, @babel/plugin-transform-react-jsx-development@npm:^7.18.6, @babel/plugin-transform-react-jsx-development@npm:^7.22.5":
+"@babel/plugin-transform-react-jsx-development@npm:^7.16.7, @babel/plugin-transform-react-jsx-development@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5"
   dependencies:
@@ -1720,7 +1720,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.14.9, @babel/plugin-transform-react-jsx@npm:^7.19.0, @babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5":
+"@babel/plugin-transform-react-jsx@npm:^7.14.9, @babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/plugin-transform-react-jsx@npm:7.22.15"
   dependencies:
@@ -7455,7 +7455,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^5.45.0"
     "@typescript-eslint/experimental-utils": "npm:^5.45.0"
     "@typescript-eslint/parser": "npm:^5.45.0"
-    "@vitejs/plugin-react": "npm:^2.1.0"
+    "@vitejs/plugin-react": "npm:^3.0.1"
     babel-eslint: "npm:^10.1.0"
     babel-loader: "npm:^9.1.2"
     chromatic: "npm:7.1.0"
@@ -9758,23 +9758,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:^2.1.0":
-  version: 2.2.0
-  resolution: "@vitejs/plugin-react@npm:2.2.0"
-  dependencies:
-    "@babel/core": "npm:^7.19.6"
-    "@babel/plugin-transform-react-jsx": "npm:^7.19.0"
-    "@babel/plugin-transform-react-jsx-development": "npm:^7.18.6"
-    "@babel/plugin-transform-react-jsx-self": "npm:^7.18.6"
-    "@babel/plugin-transform-react-jsx-source": "npm:^7.19.6"
-    magic-string: "npm:^0.26.7"
-    react-refresh: "npm:^0.14.0"
-  peerDependencies:
-    vite: ^3.0.0
-  checksum: 85fe5c740fbe8aa5dd4c3516a02a937dff0e2b0858cfa7cf8a69b998b7d05e08c296a087fde66f9171367f5c9d10d6e4bc026df1fa1e2ec528f49e7eaabeeae1
-  languageName: node
-  linkType: hard
-
 "@vitejs/plugin-react@npm:^3.0.1":
   version: 3.1.0
   resolution: "@vitejs/plugin-react@npm:3.1.0"
@@ -21226,15 +21209,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.26.7":
-  version: 0.26.7
-  resolution: "magic-string@npm:0.26.7"
-  dependencies:
-    sourcemap-codec: "npm:^1.4.8"
-  checksum: 950035b344fe2a8163668980bc4a215a0b225086e6e22100fd947e7647053c6ba6b4f11a04de83a97a276526ccb602ef53b173725dbb1971fb146cff5a5e14f6
-  languageName: node
-  linkType: hard
-
 "magic-string@npm:^0.27.0":
   version: 0.27.0
   resolution: "magic-string@npm:0.27.0"

scripts/tasks/sandbox-parts.ts

@@ -93,6 +93,25 @@ export const install: Task['run'] = async ({ sandboxDir }, { link, dryRun, debug
     await addPackageResolutions({ cwd, dryRun, debug });
     await configureYarn2ForVerdaccio({ cwd, dryRun, debug });
 
+    // Add vite plugin workarounds for frameworks that need it
+    // (to support vite 5 without peer dep errors)
+    if (
+      [
+        'bench-react-vite-default-ts',
+        'bench-react-vite-default-ts-nodocs',
+        'bench-react-vite-default-ts-test-build',
+        'internal-ssv6-vite',
+        'react-vite-default-js',
+        'react-vite-default-ts',
+        'svelte-vite-default-js',
+        'svelte-vite-default-ts',
+        'vue3-vite-default-js',
+        'vue3-vite-default-ts',
+      ].includes(sandboxDir.split(sep).at(-1))
+    ) {
+      await addWorkaroundResolutions({ cwd, dryRun, debug });
+    }
+
     await exec(
       'yarn install',
       { cwd },

scripts/utils/yarn.ts

@@ -67,7 +67,10 @@ export const addWorkaroundResolutions = async ({ cwd, dryRun }: YarnOptions) =>
   const packageJson = await readJSON(packageJsonPath);
   packageJson.resolutions = {
     ...packageJson.resolutions,
-    '@vitejs/plugin-react': '^4.0.0', // due to conflicting version in @storybook/vite-react
+    // Due to our support of older vite versions
+    '@vitejs/plugin-react': '4.2.0',
+    '@sveltejs/vite-plugin-svelte': '3.0.1',
+    '@vitejs/plugin-vue': '4.5.0',
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };