Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#414 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

@shin4141 ci sta già lavorando.

Dal 14/8/2026.

  • #419 di @shin4141 — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
18/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Ferma
Stack tecnologico
react-native, typescript
Ambito
build-system, mobile-dev

Direzione di ricerca

Start with the getNativeInjectionCode function in the injection-code module, which emits the virtual module as an ESM string. Check PR #419, which is already open against this issue, before doing anything else. To reproduce, run the Expo export with the two tree-shaking flags and confirm the hermesc 'requires module mode' error. Done means that build compiles to bytecode with the flags on and the injection module survives the optimize-graph pass.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

auto-triaged bug confirmed needs-deep-triage
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.

Lingua principale
TypeScript
Stelle
166
Fork
45
Merge medio
13g 14h
PR unite (30g)
1

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di nativewind/react-native-css

Tutte le issue di nativewind/react-native-css

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.