Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#473 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 3 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
30/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
javascript, react-native
Domaine
build-system, mobile

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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).

Langage dominant
TypeScript
Étoiles
166
Forks
45
Merge moyen
13 j 14 h
PR mergées (30 j)
1

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de nativewind/react-native-css

Toutes les issues de nativewind/react-native-css

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.