react-native: Unable to resolve module missing-asset-registry-path

Description

error Unable to resolve module missing-asset-registry-path from path/src/assets/image.png: missing-asset-registry-path could not be found within the project or in these directories: node_modules

1 | �PNG 2 | 3 | 4 | IHDRX^;I�sRGB��@IDATx�] |E֯��$܇�C<�UBeUTċ@D/�k=�UDv�o��… Error: Unable to resolve module missing-asset-registry-path from path/src/assets/image.png: missing-asset-registry-path could not be found within the project or in these directories:

React Native Version

0.72.1

Output of `npx react-native info`

System: OS: macOS 13.4 CPU: (4) x64 Intel® Core™ i5-7360U CPU @ 2.30GHz Memory: 52.41 MB / 8.00 GB Shell: version: “5.9” path: /bin/zsh Binaries: Node: version: 20.2.0 path: /usr/local/bin/node Yarn: version: 1.22.19 path: /usr/local/bin/yarn npm: version: 9.6.6 path: /usr/local/bin/npm Watchman: version: 2023.05.22.00 path: /usr/local/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /Users/apple/.rubies/ruby-3.2.2/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 22.4 - iOS 16.4 - macOS 13.3 - tvOS 16.4 - watchOS 9.4 Android SDK: Not Found IDEs: Android Studio: 2022.2 AI-222.4459.24.2221.9971841 Xcode: version: 14.3.1/14E300c path: /usr/bin/xcodebuild Languages: Java: version: 17.0.7 path: /usr/bin/javac Ruby: version: 3.2.2 path: /Users/apple/.rubies/ruby-3.2.2/bin/ruby npmPackages: “@react-native-community/cli”: installed: 11.3.5 wanted: ^11.3.5 react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.1 wanted: 0.72.1 react-native-macos: Not Found npmGlobalPackages: “react-native”: Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

Steps to reproduce

Error coming while running Apk bundling commands npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Snack, code example, screenshot, or link to a repository

command for bundling assets: npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 18 (4 by maintainers)

Most upvoted comments

I am facing this with jpg, yet png is fine. react-native 0.72.8

This config works.

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

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

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

+42

Leslie-Wong-H on Dec 21, 2023

(Expo SDK 50) Every solution didn’t work for me, but I solved missing-asset-registry-path issue by below custom metro config.

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.transformer = {
  ...config.transformer,
  babelTransformerPath: require.resolve('react-native-svg-transformer'),
  assetPlugins: ['expo-asset/tools/hashAssetFiles'],
  getTransformOptions: async () => ({
    transform: {
      experimentalImportSupport: false,
      inlineRequires: true,
    },
  }),
};
//
config.resolver = {
  ...config.resolver,
  assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
  sourceExts: [...config.resolver.sourceExts, 'svg', 'd.ts'],
};

module.exports = config;

uoon-dev on Mar 25, 2024

I had to downgrade react-native version from 0.73 to 0.68.

And node version from v20 to v16.20.0.

KushalDesai1 on Dec 21, 2023

@blakef the project is too old , i am sure the issue is an metro.config , here is the config file , please have a look ,the issue is only with png images

module.exports = (async () => {
 const {
   resolver: { sourceExts, assetExts },
 } = await getDefaultConfig();

 return {
   transformer: {
     babelTransformerPath: require.resolve('react-native-svg-transformer'),
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: false,
       },
     }),
   },
   resolver: {
     assetExts: assetExts.filter(ext => ext !== 'svg'),
     sourceExts: [...sourceExts, 'svg'],
   },
 };
})();

react-native Config File

module.exports = {
  project: {
    ios: {},
    android: {}, // grouped into "project"
  },
  assets: ["./src/assets/fonts/"], // stays the same
};

MajidAziz3 on Jul 11, 2023

with png. none of the above metroconfig is working for. what can i do?

Unable to resolve “./assets/logo.png” from “screens\Startscreen.js”

Tusharatha7 on Apr 10, 2024

I am facing this with jpg, yet png is fine. react-native 0.72.8

This config works.

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

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

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

Omg finally it works. I was using an old config and I moved to react native 7.3.0 and this update is required or the archive will fail

santiagoquintero95 on Jan 19, 2024

@Leslie-Wong-H thank you, you saved me

leorodriguesdev on Jan 10, 2024

@MajidAziz3 Your metro.config.js is in an incorrect format, please adapt to match the example here: https://github.com/facebook/metro/issues/1028#issuecomment-1628933510

huntie on Jul 11, 2023