From bbfabab3d6b2679222d9f1e330439340aeb97114 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:49:34 +0800
Subject: [PATCH] RNW-Vite: Add tsconfig path aliases support

---
 .../react-native-web-vite/package.json        |  3 +-
 .../react-native-web-vite/src/preset.ts       |  2 +
 .../react-native-web-vite/src/vite-plugin.ts  |  2 +
 code/yarn.lock                                | 38 +++++++++++++++++++
 4 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 8bc3e9b0d2bc..a727cb3fe88d 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -58,7 +58,8 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/react-vite": "workspace:*",
-    "@vitejs/plugin-react": "^4.3.2"
+    "@vitejs/plugin-react": "^4.3.2",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts
index 8e3d7d6b58a8..e288ae3625ec 100644
--- a/code/frameworks/react-native-web-vite/src/preset.ts
+++ b/code/frameworks/react-native-web-vite/src/preset.ts
@@ -4,6 +4,7 @@ import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset';
 import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow';
 import react from '@vitejs/plugin-react';
 import type { InlineConfig, PluginOption } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 import type { FrameworkOptions, StorybookConfig } from './types';
 
@@ -72,6 +73,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
   const { plugins = [] } = reactConfig;
 
   plugins.unshift(
+    tsconfigPaths(),
     flowPlugin({
       exclude: [],
     }),
diff --git a/code/frameworks/react-native-web-vite/src/vite-plugin.ts b/code/frameworks/react-native-web-vite/src/vite-plugin.ts
index 9b162509fefb..72281860f090 100644
--- a/code/frameworks/react-native-web-vite/src/vite-plugin.ts
+++ b/code/frameworks/react-native-web-vite/src/vite-plugin.ts
@@ -1,9 +1,11 @@
 import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 import { reactNativeWeb } from './preset';
 
 export const storybookReactNativeWeb = () => {
   return [
+    tsconfigPaths(),
     react({
       babel: {
         babelrc: false,
diff --git a/code/yarn.lock b/code/yarn.lock
index 9a497aefa831..bbe92fd2608a 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6705,6 +6705,7 @@ __metadata:
     "@types/node": "npm:^22.0.0"
     "@vitejs/plugin-react": "npm:^4.3.2"
     typescript: "npm:^5.3.2"
+    vite-tsconfig-paths: "npm:^5.1.4"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -16526,6 +16527,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: 10c0/a54c029520cf58bda1d8884f72bd49b4cd74e977883268d931fd83bcbd1a9eb96d57c7dbd4ad80148fb9247467ebfb9b215630b2ed7563b2a8de02e1ff7f89d1
+  languageName: node
+  linkType: hard
+
 "google-auth-library@npm:^7.14.0":
   version: 7.14.1
   resolution: "google-auth-library@npm:7.14.1"
@@ -27581,6 +27589,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsconfck@npm:^3.0.3":
+  version: 3.1.4
+  resolution: "tsconfck@npm:3.1.4"
+  peerDependencies:
+    typescript: ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: 10c0/5120e91b3388574b449d57d08f45d05d9966cf4b9d6aa1018652c1fff6d7d37b1ed099b07e6ebf6099aa40b8a16968dd337198c55b7274892849112b942861ed
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths-webpack-plugin@npm:^4.0.1":
   version: 4.1.0
   resolution: "tsconfig-paths-webpack-plugin@npm:4.1.0"
@@ -28699,6 +28721,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-tsconfig-paths@npm:^5.1.4":
+  version: 5.1.4
+  resolution: "vite-tsconfig-paths@npm:5.1.4"
+  dependencies:
+    debug: "npm:^4.1.1"
+    globrex: "npm:^0.1.2"
+    tsconfck: "npm:^3.0.3"
+  peerDependencies:
+    vite: "*"
+  peerDependenciesMeta:
+    vite:
+      optional: true
+  checksum: 10c0/6228f23155ea25d92b1e1702284cf8dc52ad3c683c5ca691edd5a4c82d2913e7326d00708cef1cbfde9bb226261df0e0a12e03ef1d43b6a92d8f02b483ef37e3
+  languageName: node
+  linkType: hard
+
 "vite@npm:5.1.5, vite@npm:^5.0.0":
   version: 5.1.5
   resolution: "vite@npm:5.1.5"