Tree shaking: getNativeInjectionCode emits raw ESM, hermesc fails with 'requires module mode' #414

Activity

1. github-actions commented on Aug 14, 2026

   

   github-actionsBot

   on Aug 14, 2026 – with GitHub Actions

   More actions

   🤖 Auto-triage

   Status: CONFIRMED
   Type: bug
   Version: v5 (react-native-css 3.0.7, nativewind 5.0.0-preview.4)

   Findings

   Verified against src/metro/injection-code.ts:19-34: getNativeInjectionCode() emits a raw ESM string (import { StyleCollection } from "react-native-css/native-internal"; ... export {};). Without EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH + EXPO_UNSTABLE_TREE_SHAKING, Metro rewrites this to CJS transparently, but with those flags the serializer re-emits modules from their ESM form, causing hermesc (script mode) to fail with 'import'/'export' statement requires module mode. The reporter's diagnosis (repro command, offending source line, ruled-out hypotheses, and ~18.5% bundle-size impact) is coherent and points squarely at the concatenated injection module.

   What I tested

   • Read src/metro/injection-code.ts — confirmed the raw ESM emission described in the report.
   • Confirmed getNativeInjectionCode is invoked from src/metro/metro-transformer.ts as the production JS path (wrapped in Buffer.from(...) and handed to worker.transform).
   • Confirmed current published version is 3.0.7, matching the report.
   • Did not attempt a Jest repro: this bug lives in the Metro serializer + hermesc pipeline (with experimental Expo tree-shaking flags), which is out of scope for registerCSS()-based unit tests.

   Next steps

   • Reproducing requires an Expo example export with EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH=1 EXPO_UNSTABLE_TREE_SHAKING=1 — not covered by the existing Jest suite; consider adding an example-app build smoke test.
   • Fix options suggested by the reporter: (a) emit CJS from getNativeInjectionCode (e.g. const { StyleCollection } = require("react-native-css/native-internal"); with require("<cssFile>") for imports), or (b) ensure the synthetic module is registered so the optimize-graph pass routes it through the ESM→CJS transform. Option (a) is the smaller, safer patch and matches how the untransformed output already looks in non-flagged builds.
   • Reporter offered to test a patch — worth pinging them once a candidate PR exists.

   ---

   _{This is an automated triage. See auto-triage.yml.}
2. github-actions

   added

   auto-triagedIssue has been automatically triaged by the auto-triage workflowIssue has been automatically triaged by the auto-triage workflow

   bugSomething isn't workingSomething isn't working

   confirmedBug reproduced and confirmed by triageBug reproduced and confirmed by triage

   needs-deep-triageNeeds Tier 2 triage (runtime/simulator, self-hosted runner)Needs Tier 2 triage (runtime/simulator, self-hosted runner)

   on Aug 14, 2026
3. mikevocalz

   added 2 commits that reference this issue on Aug 15, 2026

   perf(mobile): unblock Metro tree shaking -- iOS -17.48%, Android -17.01%

   ...

   e47ff80

   perf(mobile): unblock Metro tree shaking -- iOS -17.48%, Android -17.01%

   ...

   e7e346b
4. mikevocalz commented on Aug 16, 2026

   

   mikevocalz

   on Aug 16, 2026

   Author

   More actions

   Follow-up: I tested the obvious workaround on a physical device and it does not work — flagging it here so nobody ships it.

   Changing getNativeInjectionCode() to emit CJS instead of ESM:

   const { StyleCollection } = require("react-native-css/native-internal");
   StyleCollection.inject({...});
   module.exports = {};

   makes hermesc succeed and the build go green. The Android bundle dropped ~18.5% and an iOS/Android EAS build completed with zero requires module mode errors. But the resulting app crashes on every launch:

   Unhandled JS Exception: [runtime not ready]:
   ReferenceError: Property 'require' doesn't exist
     at global (main.jsbundle:1:171569)   jsEngine: hermes, __DEV__: false
   App terminated due to signal 6.
   

   The reason is the same one that causes the original bug: under the optimize-graph serializer this module is emitted at the top level of the bundle, outside any __d(...) factory. That scope is why the ESM statements survive to hermesc in the first place — and it is also a scope where Metro's require is not defined. So swapping the syntax only converts a build-time error into a runtime crash, which is worse because it ships silently.

   Verified on iPad Pro 12.9 (iPad8,7), iOS 26.5.2, Hermes, release build, __DEV__: false.

   So a fix probably has to change where the module lands rather than what syntax it uses — emit it inside a module factory so both require and the module registry are in scope, or keep the synthetic module out of the optimized graph entirely. Happy to test a patch on real hardware.
5. YevheniiKotyrlo commented on Nov 11, 2026

   

   YevheniiKotyrlo

   on Nov 11, 2026

   Contributor

   More actions

   The patch I run on react-native-css 3.1.0-rc.0 makes #419's change in the published dist: the native injection code loads react-native-css/native-internal and each stylesheet with require in place of import:

   diff --git a/dist/commonjs/metro/injection-code.js b/dist/commonjs/metro/injection-code.js
   --- a/dist/commonjs/metro/injection-code.js
   +++ b/dist/commonjs/metro/injection-code.js
   @@ -20,8 +20,8 @@ function getWebInjectionCode(filePaths) {
      return Buffer.from(importStatements);
    }
    function getNativeInjectionCode(cssFilePaths, values) {
   -  const importStatements = cssFilePaths.map(filePath => `import "${filePath}";`).join("\n");
   +  const importStatements = cssFilePaths.map(filePath => `require("${filePath}");`).join("\n");
      const contents = values.map(value => `StyleCollection.inject(${JSON.stringify(value)});`).join("\n");
   -  return Buffer.from(`import { StyleCollection } from "react-native-css/native-internal";\n${importStatements}\n${contents};export {};`);
   +  return Buffer.from(`const { StyleCollection } = require("react-native-css/native-internal");\n${importStatements}\n${contents}`);
    }
    //# sourceMappingURL=injection-code.js.map
   \ No newline at end of file
   diff --git a/dist/module/metro/injection-code.js b/dist/module/metro/injection-code.js
   --- a/dist/module/metro/injection-code.js
   +++ b/dist/module/metro/injection-code.js
   @@ -15,8 +15,8 @@ export function getWebInjectionCode(filePaths) {
      return Buffer.from(importStatements);
    }
    export function getNativeInjectionCode(cssFilePaths, values) {
   -  const importStatements = cssFilePaths.map(filePath => `import "${filePath}";`).join("\n");
   +  const importStatements = cssFilePaths.map(filePath => `require("${filePath}");`).join("\n");
      const contents = values.map(value => `StyleCollection.inject(${JSON.stringify(value)});`).join("\n");
   -  return Buffer.from(`import { StyleCollection } from "react-native-css/native-internal";\n${importStatements}\n${contents};export {};`);
   +  return Buffer.from(`const { StyleCollection } = require("react-native-css/native-internal");\n${importStatements}\n${contents}`);
    }
    //# sourceMappingURL=injection-code.js.map
   \ No newline at end of file