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

Image assets fail to render in Yarn workspace monorepo with React Native 0.81.* and NX

Cerrado
  • ¿Algo no está bien?
#1,615 12 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript, react-native
Área
build-system

Línea de trabajo

Comienza reproduciendo el problema con la estructura de Yarn workspace proporcionada, React Native 0.81.5, NX y la configuración de Metro mostrada, usando nx start <project>. Compara las importaciones de assets desde el directorio de la aplicación con las importaciones desde @someWorkspace/assets, y revisa las issues relacionadas 1599 y 1614. Se considera terminado cuando los assets de imagen del paquete compartido se resuelven y se renderizan sin tener que moverlos a la aplicación.

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

Descripción

Description

Image assets fail to render in Yarn workspace monorepo with React Native 0.81.* and NX.
If move assets into application's directory then metro resolves them correctly. But if assets are located in outside application's directory in the monorepo then bundler can not resolve them.

FAILS TO RESOLVE:

repo-root/
├─ apps/
│  └─ someApp/                    
│     ├─ src/
│      │  └─ App.tsx
│
└─ packages/
   └─ assets/                    ← asset lives OUTSIDE the app
     ├─ images/
      │  └─ logo.svg

SUCCESSFULLY RESOLVES:

repo-root/
│
├─ apps/
│  └─ someApp/    
                
│     ├─ src/
│         ├─ assets/
│          │ └─ logo.svg      ← asset lives INSIDE the app
│      │  └─ App.tsx
│
└─ packages/
Environment
  • React Native: 0.81.5
  • React: 19.1.0
  • Yarn: 4.x (workspaces) and 1.22.22
  • Node: 22.x
  • OS: macOS 15 (M1 Pro)
  • Bundler: Metro (default)
Relevant dependencies
{
  "@react-native/metro-config": "0.81.5",
  "@react-native/babel-preset": "0.81.5",
  "@react-native/typescript-config": "0.81.5",
  "react-native-svg-transformer": "1.5.1",
  "react-native": "0.81.5",
  "react": "19.1.0",
  "nx": "21.6.3",
  "@nx/react-native": "21.6.3"
}
App usage
// packages/mobile/App.tsx
import React from 'react'
import { Image } from 'react-native'

export const App = () => (
  <Image source={require('@someWorkspace/assets/logo.png')} style={{ width: 64, height: 64 }} />
)

When run

nx start <project>

Metro config:
const {withNxMetro} = require('@nx/react-native');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const {
  getMetroAndroidAssetsResolutionFix,
} = require('react-native-monorepo-tools');
const {withDatadogMetroConfig} = require('@datadog/mobile-react-native/metro');

const assetsFix = getMetroAndroidAssetsResolutionFix();

const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro

 *
 * @type {import('metro-config').MetroConfig}
 */
const customConfig = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
    publicPath: assetsFix.publicPath,
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
  },
  server: {
    enhanceMiddleware: assetsFix.applyMiddleware,
  },
};

module.exports = withNxMetro(
  withDatadogMetroConfig(mergeConfig(defaultConfig, customConfig)),
);
NX project config:
{
  "name": "projectName",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/someApp/src",
  "projectType": "application",
  "tags": ["app"],
  "targets": {
    "start": {
      "executor": "@nx/react-native:start",
      "dependsOn": ["sync-deps"],
      "options": {
        "port": 8081,
        "resetCache": true
      }
    }
}
...Other config
}

The app builds and runs, but the image renders as an empty space.

Expected behavior

Metro/React Native should correctly resolve and bundle static image assets exported from shared workspace packages — the same way it handles JS modules.

Actual behavior

When importing images from another workspace (e.g., @someWorkspace/assets), the app runs without any build or runtime error, but the image simply does not appear.

Screenshots / recordings
Image
Related issues:
Additional info:

Possible fixes from above issues didn't work out.

Lenguaje dominante
JavaScript
Estrellas
5.6k
Forks
702
Merge medio
3 d 5 h
PR fusionados (30 d)
51

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 react/metro

Todos los issues de react/metro

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.