className is silently dropped under Vite: no bundler integration exists outside Metro
メンテナーはふだん 3 日以内に返信
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 22/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react-native, typescript, vite
- 領域
- build-system
調査の方向性
Start with the Metro-only nativeResolver in the resolver code, since the proposed react-native-css/vite export reuses its react-native → react-native-css/components mapping, and check isFromThisModule for the skip rule. Read the reproduction repo and the react-native-web alias ordering that vite-plugin-rnw sets up. Done means the Vite export and its esbuild optimizeDeps registration pass the resolver tests, but linked PR #406 already covers this, so coordinate with it first.
索引モデルが issue の本文から書いたものです。
説明
Summary
Under Vite there is nothing that performs the react-native → react-native-css/components swap, so every className is dropped. The page still renders — same DOM, same text, no error, no warning — it is just unstyled. That makes it easy to ship without noticing.
Opening this before a PR, per CONTRIBUTING's guidance to discuss API changes first. I have a working implementation and would be glad to submit it, adjust the approach, or drop it if you would rather solve this differently.
Reproduction: https://github.com/p-larson/nativewind-vite-storybook-repro
Two apps, byte-identical except for one Vite plugin, plus a script that asserts computed styles rather than "did it render":
[broken] className in DOM: false computed size: null x null
[fixed] className in DOM: true computed size: 320px x 160px
| broken | fixed |
|---|---|
 |
 |
Why it happens
NativeWind 4 exported a JSX runtime, so the documented Other Bundlers recipe worked anywhere. Its third requirement is no longer satisfiable on v5 — [email protected] exports only ., ./babel, ./metro, ./types, ./theme, and setting jsxImportSource: "nativewind" fails the build:
Error: Missing "./jsx-dev-runtime" specifier in "nativewind" package
The work moved here, into a Metro-only resolver. I understand from the README that Metro is the officially supported bundler and that contributions for others are welcome — this is that contribution.
Proposed approach
Add a react-native-css/vite export applying the mapping nativeResolver already uses:
if (moduleName === "react-native") {
return resolver(context, `react-native-css/components`, platform);
}
react-native-css/components is already a barrel re-exporting react-native with the wrappers layered on top, so no new module is introduced and the component list cannot drift.
I first tried porting webResolver (rewriting react-native-web/dist/exports/<X>/index.js → components/<X>) and abandoned it:
-
Rollup resolvers do not run during dependency pre-bundling. Making the rewrite fire requires excluding
react-native-webfromoptimizeDeps, which exposes its CommonJS dependencies to the browser as raw CJS —inline-style-prefixer,fbjs,styleq, and others, each needing its ownoptimizeDeps.includeentry, down to deep paths likeinline-style-prefixer/lib/plugins/crossFade.js. -
It rewrites
react-native-web's own internal imports, producing exactly the initialization cycle in #380.
Following nativeResolver avoids both — react-native-web stays pre-bundled and its internals are never touched.
Two details that are easy to get wrong:
- Imports originating inside
react-native-cssmust be skipped (mirroringisFromThisModule). The barrel re-exportsreact-nativeand each wrapper uses its base component at module scope, so redirecting them recreates the #380 cycle. - Both
react-nativeandreact-native-webmust be matched, becausevite-plugin-rnwapplies that alias before user plugins run. Matching onlyreact-nativesilently no-ops.
The mapping needs registering twice: as a Vite plugin for source files, and as an esbuild plugin in optimizeDeps.esbuildOptions.plugins for pre-bundled dependencies, since esbuild does not run Rollup resolvers.
Status
Implemented on p-larson/react-native-css@feat/vite-resolver: yarn lint, yarn typecheck, and the full yarn test suite (1056 passing) are green, with 5 new resolver tests. vite is added as an optional peer dependency so Metro-only users are unaffected. I also packed the branch and ran the reproduction against the real react-native-css/vite export end-to-end.
Happy to open the PR if the approach looks reasonable.
Environment
| Package | Version |
|---|---|
react-native-css |
3.0.7 |
nativewind |
5.0.0-preview.4 |
react-native-web |
0.21 |
vite |
7.2 |
@storybook/react-native-web-vite |
10.2 |
- 主要言語
- TypeScript
- スター
- 166
- フォーク
- 45
- 平均マージ
- 13日 14時間
- マージ済み PR（30日）
- 1
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
nativewind/react-native-css のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nativewind/react-native-css#545 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nativewind/react-native-css#544 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nativewind/react-native-css#543 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
nativewind/react-native-css#540 ·
メンテナーはふだん 3 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nativewind/react-native-css#538 ·
メンテナーはふだん 3 日以内に返信
nativewind/react-native-css の issue をすべて見る
似ている issue
-
Add: Disco Mix SDオープンcheck:passed streams:add
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
メンテナーはふだん 1 日以内に返信
-
level2 nsoc26
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
GauravKarakoti/SecureFlow#1488 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
deltachat/deltachat-desktop#6914 ·
メンテナーはふだん 2 日以内に返信
-
area:cli bug P4
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
bug from-studio
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
esengine/DeepSeek-Reasonix#14868 ·
メンテナーはふだん 1 日以内に返信