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

[mikevocalz]

Summary

getNativeInjectionCode() emits its virtual module as a raw ESM string. Under Expo's experimental Metro tree shaking the serializer re-emits modules from their ESM form, so that module reaches the concatenated bundle with import/export intact. hermesc compiles the bundle in script mode, so both statements are hard errors and no production build can be produced.

Versions

• react-native-css 3.0.7
• nativewind 5.0.0-preview.4
• expo 57.0.1, @expo/cli 57.0.13, @expo/metro-config 57.0.7
• metro 0.84.4, react-native 0.86.0

Reproduction

EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH=1 EXPO_UNSTABLE_TREE_SHAKING=1 \
  npx expo export --platform android

Failed to generate Hermes bytecode for: node_modules/expo-router/entry.js
index.js:844745:1: error: 'import' statement requires module mode
index.js:853525:1: error: 'export' statement requires module mode
hermesc ... exited with non-zero code: 2

Adding --no-bytecode succeeds, and running hermesc by hand on that output pins it to a single line:

entry-<hash>.js
5663:14:     error: 'import' statement requires module mode
5663:128908: error: 'export' statement requires module mode

That line:

"use strict";import{StyleCollection}from"react-native-css/native-internal";
StyleCollection.inject({s:[["pointer-events-auto",...]]});
...
},5259,[244]);export{};

Cause

dist/commonjs/metro/injection-code.js:

function getNativeInjectionCode(cssFilePaths, values) {
  const importStatements = cssFilePaths.map(f => `import "${f}";`).join("\n");
  const contents = values.map(v => `StyleCollection.inject(${JSON.stringify(v)});`).join("\n");
  return Buffer.from(
    `import { StyleCollection } from "react-native-css/native-internal";\n` +
    `${importStatements}\n${contents};export {};`
  );
}

Without the flags this synthetic source is transformed to CJS like any other module, so the problem is invisible. With EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH + EXPO_UNSTABLE_TREE_SHAKING it is not.

Ruled out

Hypothesis	Test	Result
Expo Atlas instrumentation perturbs the serializer	reran with EXPO_ATLAS unset	same failure
Only multi-platform exports affected	Android alone	same failure
The bundle is fine, bytecode step at fault	ran hermesc by hand on --no-bytecode output	same two errors, so the bundle really does contain ESM

Unrelated to expo/expo#41620 — the build fails at bytecode generation, well before an app runs.

Impact

Measured on a production app, comparing plain JS both ways so the two sides are like-for-like:

Android bundle	Bytes
Baseline	15,968,353
Tree-shaken	13,007,862
Delta	-2,960,491 (-18.54%)

Module count is 7,828 either way, so this is dead-export elimination inside modules. That 18.54% is unreachable for any app using this package until the injection module survives the pass.

Possible fix

Emit the injection module as CJS, or register it so the optimize-graph pass runs it through the ESM to CJS transform before concatenation. Happy to test a patch.

[github-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.}