From c0d806b4b2f82f52cd6146efd46ec24957c746c1 Mon Sep 17 00:00:00 2001 From: Ryan Clark Date: Fri, 19 Jun 2026 12:46:43 +0200 Subject: [PATCH] Declare missing peers so pnpm global virtual store works (#67855) * Declare missing peers so pnpm global virtual store works * Add storybook/react-vite for storybook * Pin to major versions * Fix Storybook not working with pnpm virtual store --- pnpm-lock.yaml | 63 +++++++++++++++++++--------------- pnpm-workspace.yaml | 12 +++++++ web/.storybook/main.mts | 2 +- web/.storybook/vite.config.mts | 45 ++++++++++++++++++++++-- 4 files changed, 92 insertions(+), 30 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 38f40c59564..a987d9a5e9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,8 @@ settings: overrides: yauzl: ^3.3.1 +packageExtensionsChecksum: sha256-wJryviKpT2yBHdvlJDdnwzUQ1C8SWN6MXUeQYXbrNIo= + pnpmfileChecksum: sha256-TR6zTaL3sXZMyu+QoRdd27aSUTH6sH0gp+M2XjxgTUI= importers: @@ -30,7 +32,7 @@ importers: version: 1.14.4 '@hookform/resolvers': specifier: ^5.4.0 - version: 5.4.0(react-hook-form@7.76.1(react@19.2.6)) + version: 5.4.0(react-hook-form@7.76.1(react@19.2.6))(zod@4.4.3) '@lezer/highlight': specifier: ^1.2.3 version: 1.2.3 @@ -124,10 +126,10 @@ importers: version: link:web/packages/build '@storybook/addon-vitest': specifier: ^10.4.1 - version: 10.4.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)) + version: 10.4.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1) '@storybook/react-vite': specifier: ^10.4.1 - version: 10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(esbuild@0.28.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3)) + version: 10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(esbuild@0.28.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1)(typescript@6.0.3)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3)) '@testing-library/jest-dom': specifier: ^6.9.1 version: 6.9.1 @@ -172,7 +174,7 @@ importers: version: 5.5.0(@testing-library/dom@10.1.0)(eslint@10.4.1(jiti@2.6.1)) eslint-plugin-storybook: specifier: ^10.4.1 - version: 10.4.1(eslint@10.4.1(jiti@2.6.1))(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3) + version: 10.4.1(eslint@10.4.1(jiti@2.6.1))(storybook@10.4.1)(typescript@6.0.3) eslint-plugin-testing-library: specifier: 7.16.2 version: 7.16.2(eslint@10.4.1(jiti@2.6.1))(typescript@6.0.3) @@ -205,7 +207,7 @@ importers: version: 5.5.1 storybook: specifier: ^10.4.1 - version: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + version: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) svgo: specifier: ^4.0.1 version: 4.0.1 @@ -404,7 +406,7 @@ importers: version: 6.0.0 create-react-class: specifier: ^15.6.3 - version: 15.7.0 + version: 15.7.0(react@19.2.6) events: specifier: 3.3.0 version: 3.3.0 @@ -2169,6 +2171,7 @@ packages: resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==} peerDependencies: react-hook-form: ^7.55.0 + zod: '*' '@humanfs/core@0.19.1': resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} @@ -4503,6 +4506,8 @@ packages: create-react-class@15.7.0: resolution: {integrity: sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==} + peerDependencies: + react: '*' crelt@1.0.6: resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==} @@ -6741,6 +6746,7 @@ packages: resolution: {integrity: sha512-V1Zd2e+gBFufqAQVZ1JR8KLqALsEZ3JYSBnWwQbKa6zCfWWanR6AFMyuOkLt2gZOgGp3h2Riuz88pGNVTQSG0A==} hasBin: true peerDependencies: + '@storybook/react-vite': '*' '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 prettier: ^2 || ^3 vite-plus: ^0.1.15 @@ -9076,10 +9082,11 @@ snapshots: protobufjs: 7.6.1 yargs: 17.7.2 - '@hookform/resolvers@5.4.0(react-hook-form@7.76.1(react@19.2.6))': + '@hookform/resolvers@5.4.0(react-hook-form@7.76.1(react@19.2.6))(zod@4.4.3)': dependencies: '@standard-schema/utils': 0.3.0 react-hook-form: 7.76.1(react@19.2.6) + zod: 4.4.3 '@humanfs/core@0.19.1': {} @@ -10112,19 +10119,19 @@ snapshots: '@standard-schema/utils@0.3.0': {} - '@storybook/addon-vitest@10.4.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))': + '@storybook/addon-vitest@10.4.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1)': dependencies: '@storybook/global': 5.0.0 '@storybook/icons': 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6) - storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) transitivePeerDependencies: - react - react-dom - '@storybook/builder-vite@10.4.1(esbuild@0.28.0)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3))': + '@storybook/builder-vite@10.4.1(esbuild@0.28.0)(storybook@10.4.1)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3))': dependencies: - '@storybook/csf-plugin': 10.4.1(esbuild@0.28.0)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3)) - storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + '@storybook/csf-plugin': 10.4.1(esbuild@0.28.0)(storybook@10.4.1)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3)) + storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) ts-dedent: 2.2.0 vite: 8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3) transitivePeerDependencies: @@ -10132,9 +10139,9 @@ snapshots: - rollup - webpack - '@storybook/csf-plugin@10.4.1(esbuild@0.28.0)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3))': + '@storybook/csf-plugin@10.4.1(esbuild@0.28.0)(storybook@10.4.1)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3))': dependencies: - storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) unplugin: 2.3.11 optionalDependencies: esbuild: 0.28.0 @@ -10147,28 +10154,28 @@ snapshots: react: 19.2.6 react-dom: 19.2.6(react@19.2.6) - '@storybook/react-dom-shim@10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))': + '@storybook/react-dom-shim@10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1)': dependencies: react: 19.2.6 react-dom: 19.2.6(react@19.2.6) - storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) optionalDependencies: '@types/react': 19.2.15 '@types/react-dom': 19.2.3(@types/react@19.2.15) - '@storybook/react-vite@10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(esbuild@0.28.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3))': + '@storybook/react-vite@10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(esbuild@0.28.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1)(typescript@6.0.3)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3))': dependencies: '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@6.0.3)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3)) '@rollup/pluginutils': 5.3.0 - '@storybook/builder-vite': 10.4.1(esbuild@0.28.0)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3)) - '@storybook/react': 10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3) + '@storybook/builder-vite': 10.4.1(esbuild@0.28.0)(storybook@10.4.1)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3)) + '@storybook/react': 10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1)(typescript@6.0.3) empathic: 2.0.1 magic-string: 0.30.21 react: 19.2.6 react-docgen: 8.0.3 react-dom: 19.2.6(react@19.2.6) resolve: 1.22.12 - storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) tsconfig-paths: 4.2.0 vite: 8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3) transitivePeerDependencies: @@ -10180,15 +10187,15 @@ snapshots: - typescript - webpack - '@storybook/react@10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)': + '@storybook/react@10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1)(typescript@6.0.3)': dependencies: '@storybook/global': 5.0.0 - '@storybook/react-dom-shim': 10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)) + '@storybook/react-dom-shim': 10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1) react: 19.2.6 react-docgen: 8.0.3 react-docgen-typescript: 2.4.0(typescript@6.0.3) react-dom: 19.2.6(react@19.2.6) - storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) optionalDependencies: '@types/react': 19.2.15 '@types/react-dom': 19.2.3(@types/react@19.2.15) @@ -11358,10 +11365,11 @@ snapshots: buffer: 5.7.1 optional: true - create-react-class@15.7.0: + create-react-class@15.7.0(react@19.2.6): dependencies: loose-envify: 1.4.0 object-assign: 4.1.1 + react: 19.2.6 crelt@1.0.6: {} @@ -11950,11 +11958,11 @@ snapshots: optionalDependencies: '@testing-library/dom': 10.1.0 - eslint-plugin-storybook@10.4.1(eslint@10.4.1(jiti@2.6.1))(storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3): + eslint-plugin-storybook@10.4.1(eslint@10.4.1(jiti@2.6.1))(storybook@10.4.1)(typescript@6.0.3): dependencies: '@typescript-eslint/utils': 8.60.0(eslint@10.4.1(jiti@2.6.1))(typescript@6.0.3) eslint: 10.4.1(jiti@2.6.1) - storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + storybook: 10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6) transitivePeerDependencies: - supports-color - typescript @@ -14026,10 +14034,11 @@ snapshots: statuses@2.0.2: {} - storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6): + storybook@10.4.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@storybook/react-vite@10.4.1)(@testing-library/dom@10.1.0)(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6): dependencies: '@storybook/global': 5.0.0 '@storybook/icons': 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6) + '@storybook/react-vite': 10.4.1(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(esbuild@0.28.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.4.1)(typescript@6.0.3)(vite@8.0.16(@types/node@24.10.9)(esbuild@0.28.0)(jiti@2.6.1)(tsx@4.22.3)(yaml@2.8.3)) '@testing-library/jest-dom': 6.9.1 '@testing-library/user-event': 14.6.1(@testing-library/dom@10.1.0) '@vitest/expect': 3.2.4 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 87e1425e8fc..6fe36954d6a 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -33,6 +33,18 @@ peerDependencyRules: # This dep is needed only when using Squirrel.Windows as an installer in electron-build which we # don't use. https://www.electron.build/squirrel-windows.html - electron-builder-squirrel-windows +# create-react-class and @hookform/resolvers import react/zod without declaring them, which fails to +# resolve under the global virtual store. Declare the peers so pnpm co-locates them. +packageExtensions: + create-react-class@15: + peerDependencies: + react: '*' + '@hookform/resolvers@5': + peerDependencies: + zod: '*' + storybook@10: + peerDependencies: + '@storybook/react-vite': '*' # shellEmulator enables cross-platform scripting, allowing POSIX-style shell variables to work on Windows. shellEmulator: true # packageImportMethod avoids an issue building the web UI in docker on mac. It does not seem to diff --git a/web/.storybook/main.mts b/web/.storybook/main.mts index acd37c58c95..3fa70849134 100644 --- a/web/.storybook/main.mts +++ b/web/.storybook/main.mts @@ -43,7 +43,7 @@ const config: StorybookConfig = { options: { builder: { viteConfigPath: 'web/.storybook/vite.config.mts' } }, }, staticDirs: ['public'], - addons: [], + addons: ['@storybook/addon-vitest'], viteFinal(config) { return { ...config, diff --git a/web/.storybook/vite.config.mts b/web/.storybook/vite.config.mts index 5f7f068078e..44ecd720e4b 100644 --- a/web/.storybook/vite.config.mts +++ b/web/.storybook/vite.config.mts @@ -1,4 +1,7 @@ -import { defineConfig } from 'vite'; +import fs from 'node:fs'; +import { createRequire } from 'node:module'; + +import { defineConfig, type Plugin } from 'vite'; import { reactPlugin } from '@gravitational/build/vite/react.mjs'; @@ -6,6 +9,44 @@ export default defineConfig(({ mode }) => ({ resolve: { tsconfigPaths: true, }, - plugins: [reactPlugin(mode)], + plugins: [reactPlugin(mode), serveStorybookMockerRuntime()], assetsInclude: ['**/shared/libs/ironrdp/**/*.wasm'], })); + +/** + * Storybook's mocker runtime is a small JavaScript file that Storybook injects into the + * preview iframe to enable its mocking features. + * + * When pnpm's virtual store is used, this file does not load (404), so we serve it ourselves. + */ +function serveStorybookMockerRuntime(): Plugin { + const ENTRY_PATH = '/vite-inject-mocker-entry.js'; + const require = createRequire(import.meta.url); + + let runtime: string | null = null; + + return { + name: 'teleport:storybook-mocker-runtime-dev', + enforce: 'pre', + apply: 'serve', + configureServer(server) { + server.middlewares.use((req, res, next) => { + if (req.url === ENTRY_PATH) { + if (runtime === null) { + runtime = fs.readFileSync( + require.resolve('storybook/internal/mocking-utils/mocker-runtime'), + 'utf-8' + ); + } + + res.setHeader('Content-Type', 'application/javascript'); + res.end(runtime); + + return; + } + + next(); + }); + }, + }; +}