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

Metro resolver loop with react-native-worklets bundle mode: "Maximum call stack size exceeded" on launch (`get NativeModules`)

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

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

まだ誰も着手していません。

評価

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

調査の方向性

The loop involves two Metro resolvers: nativeResolver in react-native-css, which handles react-native imports from internal origins, and the worklets bundle-mode shim at react-native-worklets/bundleMode/shims/reactNativeShim.js. Start by reading how nativeResolver delegates to the parent resolver for internal origins, then trace the cycle through react-native-css/dist/commonjs/components/index.cjs. Done means the reproduction in the issue no longer overflows the stack when both wrappers are applied, in either order, and the workaround in the issue is no longer needed.

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

説明

Describe the bug

With react-native-worklets' bundle mode enabled (getBundleModeMetroConfig), the app crashes on launch, before AppRegistry registers anything:

RangeError: Maximum call stack size exceeded (native stack depth)
Invariant Violation: "main" has not been registered.

The stack is get NativeModules repeated, from the lazy getters in react-native-css/dist/commonjs/components/index.cjs.

Cause

Two Metro resolvers both rewrite react-native, and react-native-css hands its own react-native imports to the resolver below it:

  1. App code imports react-native. Worklets bundle mode resolves it to react-native-worklets/bundleMode/shims/reactNativeShim.js.
  2. The shim runs module.exports = require('react-native'). react-native-css's nativeResolver redirects that to react-native-css/components.
  3. react-native-css/components/index.cjs imports react-native. Because the origin is internal, nativeResolver returns the parent resolver's result, and the parent (worklets) sends it back to the shim.
  4. The shim's exports are the react-native-css components, whose getters call require('react-native'), which returns the shim again. The getters recurse forever.

It loops whichever order the two configs are applied in. nativeResolver already exempts react-native/index.js as an origin. The internal-origin path has a similar problem: it trusts the parent resolver to return the real package.

Workaround (in metro.config.js, after both wrappers):

const path = require('node:path');

const reactNativeCssDir = `${path.sep}node_modules${path.sep}react-native-css${path.sep}`;
const resolveRequest = config.resolver.resolveRequest;
config.resolver.resolveRequest = (context, moduleName, platform) =>
	moduleName === 'react-native' &&
	context.originModulePath.includes(reactNativeCssDir)
		? context.resolveRequest(context, moduleName, platform)
		: resolveRequest(context, moduleName, platform);

Suggested fix: in nativeResolver, resolve react-native from an internal origin with Metro's default context.resolveRequest instead of the parent resolver. react-native-css's components always need the real package.

Reproduction

npx rn-new@next --nativewind, add react-native-worklets, then in metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');
const { withNativewind } = require('nativewind/metro');
const { getBundleModeMetroConfig } = require('react-native-worklets/bundleMode');

let config = getDefaultConfig(__dirname);
config = withNativewind(config);
config = getBundleModeMetroConfig(config);
module.exports = config;

Launch on iOS. The crash happens during module init, before any component renders.

Versions

  • nativewind 5.0.0-rc.0
  • react-native-css 3.1.0-rc.0
  • react-native-worklets 0.13.0 (react-native-reanimated 4.7.1)
  • react-native 0.86.3, expo 57.0.27
  • tailwindcss 4.3.3
  • iOS simulator, Hermes

Possibly related: #455 has the same error text, but a different trigger (styled() around react-native-svg at render time).

主要言語
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 を短くまとめたダイジェスト。