Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#414 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 3 日以内に返信

@shin4141 がすでに取り組んでいます。

2026年8月14日 から。

  • #419 @shin4141 による — オープン

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
18/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
react-native, typescript
領域
build-system, mobile-dev

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
166
フォーク
45
平均マージ
13日 14時間
マージ済み PR（30日）
1

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

nativewind/react-native-css のほかの issue

nativewind/react-native-css の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。