Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#473 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 3 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
30/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, react-native
Área
build-system, mobile

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
166
Forks
45
Merge medio
13 d 14 h
PR fusionados (30 d)
1

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nativewind/react-native-css

Todos los issues de nativewind/react-native-css

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.