fix: barrel optimization breaking native hmr

packages/vxrn/src/plugins/reactNativeDevServer.ts

@@ -171,6 +171,7 @@ export function createReactNativeDevServerPlugin(options: VXRNOptionsFilled): Pl
       }
 
       // Handle React Native endpoints
+      // HMR fetching updates
       server.middlewares.use('/file', async (req, res) => {
         const url = new URL(req.url!, `http://${req.headers.host}`)
         const file = url.searchParams.get('file')

packages/vxrn/src/utils/getReactNativeBundle.ts

@@ -1,6 +1,6 @@
 import { readFile } from 'node:fs/promises'
 import { dirname, relative } from 'node:path'
-import { createBuilder } from 'vite'
+import { type BuildEnvironment, createBuilder } from 'vite'
 // import { buildEnvironment } from './fork/vite/build'
 import { resolvePath } from '@vxrn/resolve'
 import { filterPluginsForNative } from './filterPluginsForNative'
@@ -102,7 +102,22 @@ export async function getReactNativeBundle(
   // We are using a forked version of the Vite internal function `buildEnvironment` (which is what `builder.build` calls) that will return the Rollup cache object with the build output, and also with some performance improvements.
   // disabled due to differences in vite 6 stable upgrade
 
-  const buildOutput = await builder.build(environment)
+  const buildEnvironment: BuildEnvironment = {
+    ...environment,
+    init: environment.init,
+    options: environment.options,
+    getTopLevelConfig: environment.getTopLevelConfig,
+    plugins: (() => {
+      if (internal.mode !== 'prod') {
+        // Workaround of removing barrel optimization plugins in dev, as it will break HMR because we didn't handle barrel optimizations in HMR yet.
+        return environment.plugins.filter((p) => !p.name.startsWith('vite-plugin-barrel'))
+      }
+
+      return environment.plugins
+    })(),
+  }
+
+  const buildOutput = await builder.build(buildEnvironment)
 
   if (process.env.ONE_DEBUG_BUILD_PERF) {
     console.info(JSON.stringify(buildStats, null, 2))

tests/hmr/app/index.tsx

@@ -3,6 +3,8 @@ import { View, Text, TextInput } from 'react-native'
 import { TestComponent } from 'components/TestComponent'
 import { TestComponentContainingRelativeImport } from 'components/TestComponentContainingRelativeImport'
 import { TestComponentUsingHookThatHasNativeVersion } from 'components/TestComponentUsingHookThatHasNativeVersion'
+import { TestComponentImportingBarrelFile } from 'components/TestComponentImportingBarrelFile'
+
 // TODO
 // import { TestComponentWithFlatList } from 'components/TestComponentWithFlatList'
 
@@ -16,6 +18,7 @@ export default function Page() {
       <TestComponent />
       <TestComponentContainingRelativeImport />
       <TestComponentUsingHookThatHasNativeVersion />
+      <TestComponentImportingBarrelFile />
       {/* <TestComponentWithFlatList /> */}
     </View>
   )

tests/hmr/components/TestComponentImportingBarrelFile.tsx

@@ -0,0 +1,17 @@
+import { View, Text } from 'react-native'
+import { Rocket } from '@tamagui/lucide-icons'
+const IconComponent = Rocket
+const text = 'Some text in TestComponentImportingBarrelFile'
+
+export function TestComponentImportingBarrelFile() {
+  return (
+    <View>
+      <Text testID="TestComponentImportingBarrelFile-text-content">{text}</Text>
+      <Text>
+        {
+          IconComponent.toString() /* don't render the actual icon here since it require setting up Tamagui and will introduce additional complexity */
+        }
+      </Text>
+    </View>
+  )
+}

tests/hmr/package.json

@@ -5,21 +5,23 @@
   "type": "module",
   "scripts": {
     "dev": "one dev",
-    "test-macos": "TEST_ONLY=dev vitest",
-    "test-ios": "TEST_ONLY=dev DEV_PORT=8081 vitest --config ./vitest.config.ios.ts"
-  },
-  "devDependencies": {
-    "playwright": "^1.49.1",
-    "vitest": "^3.0.5",
-    "webdriverio": "^9.5.4"
+    "test-ios": "TEST_ONLY=dev DEV_PORT=8081 vitest --config ./vitest.config.ios.ts",
+    "test-macos": "TEST_ONLY=dev vitest"
   },
   "dependencies": {
+    "@tamagui/lucide-icons": "^1.124.17",
     "expo": "~52.0.17",
     "expo-modules-core": "2.1.2",
     "one": "workspace:*",
     "react": "^19.0.0",
     "react-native": "^0.76.5",
     "react-native-screens": "4.4.0",
+    "react-native-svg": "^15.11.1",
     "vite": "^6.1.0"
+  },
+  "devDependencies": {
+    "playwright": "^1.49.1",
+    "vitest": "^3.0.5",
+    "webdriverio": "^9.5.4"
   }
 }

tests/hmr/tests/hmr.test.ios.ts

@@ -31,7 +31,7 @@
   const driver = await remote(getWebDriverConfig())
 
   const textInput = driver.$('~text-input')
   await textInput.waitForDisplayed({ timeout: 2 * 60 * 1000 })
   await textInput.setValue('app did not reload')
   expect((await textInput.getValue()).endsWith('did not reload')).toBe(true)
 
@@ -41,7 +41,7 @@
   editFn()
 
   try {
     const result = await driver.waitUntil(
       async () => {
         const element = await driver.$(`~${testId}`)
         return element && (await element.getText()) === editedText
@@ -104,6 +104,29 @@
   }
 )
 
+test('component importing barrel file HMR', { timeout: 5 * 60 * 1000, retry: 3 }, async () => {
+  await testHMR(
+    'TestComponentImportingBarrelFile-text-content',
+    'Some text in TestComponentImportingBarrelFile',
+    () => {
+      editFile(
+        path.join(root, 'components', 'TestComponentImportingBarrelFile.tsx'),
+        `
+        import { Rocket } from '@tamagui/lucide-icons'
+        const IconComponent = Rocket
+        const text = 'Some text in TestComponentImportingBarrelFile'
+              `.trim(),
+        `
+        import { Heart } from '@tamagui/lucide-icons' // import another icon, this is part of the test
+        const IconComponent = Heart
+        const text = 'Some edited text in TestComponentImportingBarrelFile'
+              `.trim()
+      )
+    },
+    'Some edited text in TestComponentImportingBarrelFile'
+  )
+})
+
 // TODO: make this pass
 test.skip('layout HMR', { timeout: 5 * 60 * 1000, retry: 3 }, async () => {
   await testHMR(