Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#414 2 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 3 dias

@shin4141 já está trabalhando nisso.

Desde 14/8/2026.

  • #419 de @shin4141 — aberto

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
18/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
react-native, typescript
Domínio
build-system, mobile-dev

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.

Linguagem predominante
TypeScript
Estrelas
166
Forks
45
Merge médio
13d 14h
PRs com merge (30d)
1

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de nativewind/react-native-css

Todas as issues de nativewind/react-native-css

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.