From c71046546572d49d6b1eebaab0e027c2c0cb6970 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sat, 18 Jan 2025 14:33:34 +0000
Subject: [PATCH] RNWVite: Support for requires in rnw for images/fonts

---
 .../react-native-web-vite/package.json        |  1 +
 .../react-native-web-vite/src/preset.ts       |  2 ++
 code/yarn.lock                                | 24 +++++++++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index da31ba3bca39..665a1f9a1786 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -62,6 +62,7 @@
     "@storybook/react-vite": "workspace:*",
     "@vitejs/plugin-react": "^4.3.2",
     "vite-plugin-babel": "^1.3.0",
+    "vite-plugin-commonjs": "^0.10.4",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {
diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts
index df94a85d1434..e71b045d8d24 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 { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow';
 import react from '@vitejs/plugin-react';
 import type { InlineConfig, PluginOption } from 'vite';
 import babel from 'vite-plugin-babel';
+import commonjs from 'vite-plugin-commonjs';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 import type { FrameworkOptions, StorybookConfig } from './types';
@@ -129,6 +130,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
       }),
       ...plugins,
       reactNativeWeb(),
+      commonjs(),
     ],
     optimizeDeps: {
       esbuildOptions: {
diff --git a/code/yarn.lock b/code/yarn.lock
index 0dea4bb69fab..1b3b45455ffd 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6975,6 +6975,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:^4.3.2"
     typescript: "npm:^5.3.2"
     vite-plugin-babel: "npm:^1.3.0"
+    vite-plugin-commonjs: "npm:^0.10.4"
     vite-tsconfig-paths: "npm:^5.1.4"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -29223,6 +29224,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-commonjs@npm:^0.10.4":
+  version: 0.10.4
+  resolution: "vite-plugin-commonjs@npm:0.10.4"
+  dependencies:
+    acorn: "npm:^8.12.1"
+    magic-string: "npm:^0.30.11"
+    vite-plugin-dynamic-import: "npm:^1.6.0"
+  checksum: 10c0/074e0d7a1e8f20d605f1a02c53867706639ea5a9aac8657e8d90442f13cf86154a6ebc65de1f05eb62e1a98523422d5025f3b7ccaabe88c486bec12b45e5d136
+  languageName: node
+  linkType: hard
+
+"vite-plugin-dynamic-import@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "vite-plugin-dynamic-import@npm:1.6.0"
+  dependencies:
+    acorn: "npm:^8.12.1"
+    es-module-lexer: "npm:^1.5.4"
+    fast-glob: "npm:^3.3.2"
+    magic-string: "npm:^0.30.11"
+  checksum: 10c0/049f953b404157346e06a729eb055bc5b3630ac990bf36d52e6c44b1b223ac8e1f22fa1c44cadea55e7621366a0666439860fd4572f09c87daa45affd5dd15b6
+  languageName: node
+  linkType: hard
+
 "vite-plugin-inspect@npm:^0.8.5":
   version: 0.8.9
   resolution: "vite-plugin-inspect@npm:0.8.9"