search

expo / google-fonts

Use any of the 1000+ fonts (and their variants) from fonts.google.com in your Expo app.
MIT License
778 stars 67 forks source link

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

Open punksta opened 1 year ago

punksta commented 1 year ago 
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 commented 12 months ago

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 commented 7 months ago

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

config.resolver.assetExts.push("ttf")
YASH6004 commented 6 months ago

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 commented 5 months ago

Try this, it is work's for me.

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

Praisecodes commented 5 months ago

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 commented 5 months ago

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 commented 3 weeks ago

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"