diff --git a/bun.lock b/bun.lock index f18666327..63355e24d 100644 --- a/bun.lock +++ b/bun.lock @@ -207,6 +207,7 @@ "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-transform-destructuring": "^7.28.5", + "@babel/plugin-transform-flow-strip-types": "^7.27.1", "@babel/plugin-transform-react-jsx": "^7.27.1", "@babel/plugin-transform-regenerator": "^7.28.4", "@react-native/babel-plugin-codegen": "^0.83.0", diff --git a/packages/compiler/.depcheckrc b/packages/compiler/.depcheckrc index 8e3b1291f..2abeee240 100644 --- a/packages/compiler/.depcheckrc +++ b/packages/compiler/.depcheckrc @@ -1,6 +1,7 @@ ignores: - "babel-plugin-react-compiler" - "@babel/plugin-transform-destructuring" + - "@babel/plugin-transform-flow-strip-types" - "@react-native/babel-plugin-codegen" - "@babel/plugin-transform-react-jsx" - "@babel/plugin-transform-regenerator" diff --git a/packages/compiler/package.json b/packages/compiler/package.json index ee1ed3354..1587b0e73 100644 --- a/packages/compiler/package.json +++ b/packages/compiler/package.json @@ -31,6 +31,7 @@ "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-transform-destructuring": "^7.28.5", + "@babel/plugin-transform-flow-strip-types": "^7.27.1", "@babel/plugin-transform-react-jsx": "^7.27.1", "@babel/plugin-transform-regenerator": "^7.28.4", "@react-native/babel-plugin-codegen": "^0.83.0", diff --git a/packages/compiler/src/transformBabel.ts b/packages/compiler/src/transformBabel.ts index 3d9645a94..13becac53 100644 --- a/packages/compiler/src/transformBabel.ts +++ b/packages/compiler/src/transformBabel.ts @@ -104,6 +104,17 @@ export async function transformBabel( : '', ...(options.presets || []), ].filter(Boolean), + // Non-TS files use React Native's Flow dialect — RN's own component specs are + // Flow `.js` (`import type`, `codegenNativeComponent(…)`, `(expr: Type)` casts). + // Enable Flow syntax parsing + stripping, mirroring the TypeScript preset above + // (`@react-native/babel-preset` does the same: TS → preset-typescript, JS → this + // plugin). Without it babel can't parse Flow, so plugins like + // @react-native/babel-plugin-codegen silently fail on RN specs and the runtime + // "Codegen didn't run" warning fires. TS path is byte-identical (empty slice). + plugins: [ + ...(options.plugins || []), + ...(isTS ? [] : ['@babel/plugin-transform-flow-strip-types']), + ], } try { diff --git a/packages/vxrn/src/utils/createNativeDevEngine.ts b/packages/vxrn/src/utils/createNativeDevEngine.ts index 21fcdcb72..9ee177a96 100644 --- a/packages/vxrn/src/utils/createNativeDevEngine.ts +++ b/packages/vxrn/src/utils/createNativeDevEngine.ts @@ -195,15 +195,20 @@ function getNativePlugins( cssStubPlugin(), // handle import.meta.glob (used by One's route system) viteImportGlobPlugin({ root }), - // strip Flow types from react-native and @react-native packages + // @vxrn/compiler babel transforms: reanimated worklets, async generators, + // react-native codegen, react compiler — same pipeline as metro. Runs BEFORE + // flowStripPlugin so react-native's Flow `.js` specs reach codegen with their + // type argument intact — stripping Flow first would erase it (which is why the + // codegen "didn't run for " warning fired). + vxrnCompilerPlugin(platform, dev), + // strip Flow from any react-native / @react-native `.js` the compiler didn't + // handle — the guaranteed safety net before rolldown's oxc core parse (which + // can't parse Flow). Now downstream of the compiler, so codegen sees the types. flowStripPlugin(), // guard undefined native methods in NativeAnimatedHelper nativeAnimatedGuardPlugin(), // handle asset imports (.png, .jpg, .ttf, etc.) assetPlugin({ root, platform, assetsDest }), - // @vxrn/compiler babel transforms: reanimated worklets, async generators, - // react-native codegen, react compiler — same pipeline as metro - vxrnCompilerPlugin(platform, dev), // hermes compat: transform class properties and private fields hermesCompatSWCPlugin(dev), ]