Unable to resolve module missing-asset-registry-path from /node_modules/@expo-google-fonts/manrope/Manrope_200ExtraLight.ttf:

[punksta]

metro build index.js --platform ios --dev true --out output.js  --bundle-output ios/main.jsbundle -c 
metro.config.js --reset-cache
                                                      
                        #######                       
                   ################                   
                #########     #########               
            #########             ##########          
        #########        ######        #########      
       ##########################################     
      #####      #####################       #####    
      #####          ##############          #####    
      #####    ###       ######       ###    #####    
      #####    #######            #######    #####    
      #####    ###########    ###########    #####    
      #####    ##########################    #####    
      #####    ##########################    #####    
      #####      ######################     ######    
       ######        #############        #######     
         #########        ####       #########        
              #########          #########            
                  ######### #########                 
                       #########                      
                                                      
                                                      
warning: the transform cache was reset.
                    Welcome to Metro!
              Fast - Scalable - Integrated


 BUNDLE  ./index.js ▓▓░░░░░░░░░░░░░░ 18.0% (694/1842)Error: Unable to resolve module missing-asset-registry-path from /Users/user/projects/face-it-app/node_modules/@expo-google-fonts/manrope/Manrope_200ExtraLight.ttf: missing-asset-registry-path could not be found within the project or in these directories:
  node_modules
  ../../node_modules

  4 | �
       ��`z��vPP(��'/3A".#"#&632326'3"&&53326533#35!�'KHB+
    at ModuleResolver.resolveDependency (/Users/user/projects/face-it-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:158:15)
    at DependencyGraph.resolveDependency (/Users/user/projects/face-it-app/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at Object.resolve (/Users/user/projects/face-it-app/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/user/projects/face-it-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/user/projects/face-it-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/user/projects/face-it-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/Users/user/projects/face-it-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

package.json

{
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint-fix": "eslint ./src --quiet --fix . --ext .js,.tsx,.ts,.jsx",
    "lint": "eslint ./src --ext .js,.tsx,.ts,.jsx",
   }
  "dependencies": {
    "@apollo/client": "^3.6.9",

    "@expo-google-fonts/montserrat": "^0.2.2",
    "@expo-google-fonts/poppins": "^0.2.2",
    
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
  
    "expo": "^46.0.0",

    "expo-font": "~10.2.0",
    "expo-haptics": "~11.3.0",
    "expo-image-picker": "~13.3.1",
    "expo-linking": "~3.2.2",
    "expo-permissions": "~13.2.0",
    "expo-status-bar": "~1.4.0",
    "expo-store-review": "~5.3.0",
    "fp-ts": "^2.11.5",
    "graphql": "15.8.0",
    "isomorphic-fetch": "^3.0.0",
    "lottie-react-native": "5.1.3",
    "memoizerific": "^1.11.3",
    "native-base": "3.3.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-fast-compare": "^3.2.0",
    "react-native": "0.69.5",

  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/plugin-proposal-export-namespace-from": "^7.16.7",
    "@expo/webpack-config": "^0.17.0",
    "@react-native-community/eslint-config": "^3.0.1",
    "@svgr/webpack": "^5.4.0",
    "@types/isomorphic-fetch": "0.0.36",
    "@types/jest": "^27.0.2",
    "@types/react": "~18.0.0",
    "@types/react-dom": "~18.0.0",
    "@types/react-native": "~0.69.1",
    "@typescript-eslint/eslint-plugin": "^5.26.0",
    "@typescript-eslint/parser": "^5.26.0",
    "apollo": "2.34.0",
    "babel-plugin-import-graphql": "^2.8.1",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-unused-imports": "^1.1.5",
    "fast-check": "^2.19.0",
    "firebase": "^9.10.0",
    "jest": "^26.6.3",
    "jest-expo": "^46.0.0",
    "prettier": "^2.4.1",
    "react-native-svg-transformer": "^0.14.3",
    "typescript": "4.7.2"
  },
  "jest": {
    "preset": "jest-expo",
    "setupFiles": [
      "./jest.setup.ts"
    ]
  },
  "resolutions": {
    "graphql": "15.8.0",
    "@types/react": "17.0.47"
  }
}

[KennyCallegari]

I had the same issue, it was coming from my metro.config.js after a bad config of react-native-svg-transformer.

Here's the config for Expo :

const { getDefaultConfig: getDefaultExpoConfig } = require("@expo/metro-config")

metroConfig = (() => {
  const config = getDefaultExpoConfig(__dirname)

  const { transformer, resolver } = config

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  }
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  }

  return config
})()

And for vanilla js

const { getDefaultConfig } = require("metro-config")

metroConfig = (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"],
    },
  }
})()

And last : module.exports = metroConfig

Hope it helps !

[tomhicks]

I solved this by following the Expo guide to customising your metro config, then adding this:

config.resolver.assetExts.push("ttf")

[YASH6004]

i have changed my code form this code

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
const { getDefaultConfig } = require("metro-config");
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};


module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

to this code

const { getDefaultConfig } = require("metro-config")

metroConfig = (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"],
    },
  }
})()

module.exports = metroConfig

and the issue is still the same as

error: Error: Unable to resolve module missing-asset-registry-path from src/assets/images/rg_image.png: missing-asset-registry-path could not be found within the project or in these directories:
  node_modules
  ../../../../node_modules
> 1 | �PNG
  2 | 
  3 | 
  4 | IHDR��.u_	pHYs!8!8E�1`sRGB���gAMA��
                                         �a3�IDATx�kpו���<I
    at ModuleResolver.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (//node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies /node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at async Promise.all (index 1)
    at async visit (/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 3)
    at async visit (/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 8)

[Mitdd9707]

Try this, it is work's for me.

const { getDefaultConfig } = require('expo/metro-config');

[Praisecodes]

Hey, so using react-native-svg and react-native-svg-transformer with expo/metro-config, your metro.config.js file should look something like this:

const {getDefaultConfig} = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
const { transformer, resolver } = config;

config.transformer = {
  ...transfromer,
  babelTransformerPath: require.resolve('react-native-svg-transformer'),
}
config.resolver = {
  ...resolver,
  assetExts: resolver.assetExts.filter((ext)=>ext!=='svg'),
  sourceExts: [...resolver.sourceExts, 'svg'],
}

module.exports = config;

Of recent, I've had issues with eas update because of the metro config file, and the code above has helped me fix it perfectly.
Plus, it's quite straightforward, easy to understand and replicate anytime!

I had the same issue, it was coming from my metro.config.js after a bad config of react-native-svg-transformer.

Here's the config for Expo :

const { getDefaultConfig: getDefaultExpoConfig } = require("@expo/metro-config")

metroConfig = (() => {
  const config = getDefaultExpoConfig(__dirname)

  const { transformer, resolver } = config

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  }
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  }

  return config
})()

And for vanilla js

const { getDefaultConfig } = require("metro-config")

metroConfig = (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"],
    },
  }
})()

And last : module.exports = metroConfig

Hope it helps !

Thanks to this reply right here ❤️

[joaokx]

conseguem ajuda com const { getDefaultConfig } = require("expo/metro-config");
const path = require('path');

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

// Adicionando "ttf" à lista de extensões de asset
config.resolver.assetExts.push("ttf");

return {
    ...defaultConfig,
    transformer: {
        assetPlugins: ['expo-asset/tools/hashAssetFiles'],
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false
            }
        }),
        babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
        ...defaultConfig.resolver,
        assetExts: [...assetExts],
        sourceExts: [...sourceExts, "svg"]
    }
};

})();
Android Bundling failed 11670ms (index.js)
Unable to resolve "missing-asset-registry-path" from "assets/fonts/Inter-Black.ttf"

[thien1103]

I have the same issue, please help me fix this problem. This is the metro.config.js:

const path = require('path');

module.exports = {
  resolver: {
    assetExts: [
      'png',
      'jpg',
      'jpeg',
      'svg',
      'ttf',
      'otf',
      // Add other file extensions that your project uses
    ],
  },
  projectRoot: path.resolve(__dirname),
  watchFolders: [path.resolve(__dirname, 'node_modules')],
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  // Add the asset directory to the watch list
  watchFolders: [path.resolve(__dirname, './assets/')],
};

Error: Unable to resolve "missing-asset-registry-path" from "assets\svg\back_button.svg"

[ohabbers]

Thanks to @tomhicks commnet I was able to resolve the
Unable to resolve "missing-asset-registry-path" from "node_modules/expo-router/assets/file.png"

First i ran this:
npx expo customize metro.config.js

Modified this:

const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname);

// Added this line:
config.resolver.assetExts.push("png");

module.exports = config;

[kratikapareek1998]

Expo SDK 53 no longer includes Reanimated by default and react-native-gesture-handler is trying to use react-native-reanimated

npx expo install react-native-reanimated