Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Closed
  • Is something wrong?
#1,615 12 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, react-native
Domain
build-system

Research direction

Start by reproducing the issue with the provided Yarn workspace layout, React Native 0.81.5, NX, and the shown Metro configuration, using nx start <project>. Compare asset imports from the application directory with imports from @someWorkspace/assets, and review related issues 1599 and 1614. Done means shared-package image assets resolve and render without requiring them to be moved into the app.

Written by the indexing model from the issue text.

Description

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.

Dominant language
JavaScript
Stars
5.6k
Forks
702
Avg merge
3d 6h
Merged PRs (30d)
50

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react/metro

All issues in react/metro

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.