expo: Module not found: Can't resolve '@react-native/assets-registry/registry'

yarn add @react-native/assets-registry fixes the issue for me.

I noticed the problems started after I upgraded to Expo 48.

A potential solution could involve using an earlier version of expo-asset specifically for web through package aliasing.

Follow these steps to implement this fix:

1. Incorporate the following lines into your dependencies at package.json file:

"expo-asset": "^8.9.1",
"expo-asset-web": "npm:expo-asset@8.7.0"

Bear in mind, we’ll be employing distinct versions of expo-asset for web, iOS, and Android.

1. Open your webpack.config.js file and include the following content: (If the webpack.config.js file is not located in the root directory of your project, please refer to these instructions to customize it: https://docs.expo.dev/guides/customizing-webpack/)

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    // Insert the following code snippet: 👇
    config.resolve.alias['expo-asset'] = 'expo-asset-web';
    // Rest of your code...
    return config;
};

1. Execute the command: rm -rf yarn.lock node_modules
2. In the root directory of your project, create a postinstall.sh file and include the following content:

#!/bin/sh
rm -rf node_modules/expo-asset-web/node_modules/@expo/config-plugins/build

1. Return to your package.json file, find the scripts section, and add this script:

"postinstall": "chmod +x ./postinstall.sh && ./postinstall.sh"

This step is vital to ensure no conflict arises between expo-asset and expo-asset-web packages when using Native modules in Android/iOS environments.

1. Save and close your package.json file.
2. Run: yarn install --no-cache --ignore-platform
3. Run: yarn expo start --web

Now, you should be able to launch your project on the web without encountering any issues.

We’re blocked by this as well. Upgraded to Expo 48, ran yarn add @react-native/assets-registry to fix the original error and get the app working on web, but are now getting the same error as @codinsonn…

In the CLI:

Error: Module "7" is missing from the asset registry

In our dev client:

Unrecognized font family 'Montserrat_500Medium'

yarn add @react-native/assets-registry fixes the issue for me.

This didn’t work for me unfortunately, but I think my issue is related to the combination of expo and next.js. Downgrading to expo 47, makes it work again with @expo/vector-icons.

Getting this as well after updating to 48

Thank you for filing this issue! This comment acknowledges we believe this may be a bug and there’s enough information to investigate it. However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

You need to instruct whatever bundler you’re using to transpile @react-native/assets-registry/registry since the Facebook team ships that file untranspiled. In Next.js, you can do this with transpileModules.

Trying to do the expo tutorial and running into this

This is a showstopper for us on upgrade to 48 as well!

I made it work by patching registry.js

diff --git a/node_modules/@react-native/assets/registry.js b/node_modules/@react-native/assets/registry.js
index 088187f..0a384d1 100644
--- a/node_modules/@react-native/assets/registry.js
+++ b/node_modules/@react-native/assets/registry.js
@@ -10,28 +10,16 @@
 
 'use strict';
  
-export type PackagerAsset = {
-  +__packager_asset: boolean,
-  +fileSystemLocation: string,
-  +httpServerLocation: string,
-  +width: ?number,
-  +height: ?number,
-  +scales: Array<number>,
-  +hash: string,
-  +name: string,
-  +type: string,
-  ...
-};
 
-const assets: Array<PackagerAsset> = [];
+const assets = [];
 
-function registerAsset(asset: PackagerAsset): number {
+function registerAsset(asset) {
   // `push` returns new array length, so the first asset will
   // get id 1 (not 0) to make the value truthy
   return assets.push(asset);
 }
 
-function getAssetByID(assetId: number): PackagerAsset {
+function getAssetByID(assetId) {
   return assets[assetId - 1];
 }

thanks @danilovich 🎉

the @react-native/assets-registry will be a transitive package of react-native@0.72. (previously, it was @react-native/assets). i added that compatible code for 0.72 support and broke webpack unfortunately. so yeah, explicit @react-native/assets-registry or @react-native/assets are not necessary.

we’ve published expo-asset@8.9.1 with the fix. please try to upgrade this version and see whether it works for you. if you don’t have a direct dependency to expo-asset. please upgrade expo@48.0.6 (expo-asset is a transitive dependency of expo). thanks for waiting!

Having the same issue as @codinsonn, but with the module 13, which cannot be found, after installing @react-native/assets/registry. In addition, the expo icons don’t show on web browser

Uncaught Error Module “13” is missing from the asset registry

node_modules/expo-asset/build/Asset.js (120:19)

   118 | const meta = getAssetByID(virtualAssetModule);
   119 | if (!meta) {
> 120 |   throw  new Error(`Module "${virtualAssetModule}" is missing from the asset registry`); 
          |              ^
   121 |}
   122 |// Outside of the managed env we need the moduleId to initialize the asset
   123 |// because resolveAssetSource depends on it

I’m also experiencing issues that might be related to this.

Trying to use @expo/vector-icons in a next.js project.

I follow the instructions here: https://docs.expo.dev/guides/using-nextjs/#font-support.

Whenever I try to load a font I get the above error, and the underlying error is this:

error - ../node_modules/@react-native/assets/registry.js
Error: 
  x Expected '{', got 'type'
    ,-[/PROJECTFOLDER/node_modules/@react-native/assets/registry.js:10:1]
 10 | 
 11 | 'use strict';
 12 | 
 13 | export type PackagerAsset = {
    :        ^^^^
 14 |   +__packager_asset: boolean,
 15 |   +fileSystemLocation: string,
 16 |   +httpServerLocation: string,
    `----

Caused by:
    Syntax Error

Import trace for requested module:
../node_modules/@react-native/assets/registry.js
../node_modules/expo-asset/build/ReactNativeCompatibleAssetsRegistry.js
../node_modules/expo-asset/build/Asset.js
../node_modules/expo-asset/build/index.js
../node_modules/expo-font/build/FontLoader.web.js
../node_modules/expo-font/build/Font.js
../node_modules/expo-font/build/index.js
../node_modules/@expo/vector-icons/build/createIconSet.js
../node_modules/@expo/vector-icons/build/Icons.js

I’ve been trying to debug this for a while, but didn’t really get anywhere. Seems like an error for webpack parsing the flow syntax.

Update:

It works when downgrading to expo 47

[asset] revert @react-native/assets-registry compatible layer #21559

What’s the Expo and RN version. Tried this but doesn’t work

@saeedblanchette yes I followed @Kudo 's advice and part of this issue as well https://github.com/facebook/react-native/issues/36343

@Kudo awesome! I’m happy to confirm that the issue is resolved now, thank you so much!

Also, it seems that with this update there is no need to install @react-native/assets-registry explicitly.

We are experiencing the same issue as @giaset reported. Having expo sdk updated to expo@48.0.5, installed @react-native/assets-registry@0.72.0 and expo-font@11.1.1 Using the following code ` import { useFonts } from ‘expo-font’;

export const useCustomFonts = () => { const [fontsLoaded, error] = useFonts({ ‘FS Maja’: require(‘…/…/…/assets/maja/FSMaja-Regular.otf’), ‘FS Aldrin’: require(‘…/…/…/assets/aldrin/FSAldrin-Regular.ttf’), ‘FS Aldrin Medium’: require(‘…/…/…/assets/aldrin/FSAldrin-Medium.ttf’), ‘FS Aldrin Bold’: require(‘…/…/…/assets/aldrin/FSAldrin-Bold.ttf’), ‘FS Aldrin Light’: require(‘…/…/…/assets/aldrin/FSAldrin-Light.ttf’), ‘FS Aldrin Italic’: require(‘…/…/…/assets/aldrin/FSAldrin-Italic.ttf’), ‘equitec’: require(‘…/…/…/lib/module/ui/Icon/fonts/equitec.ttf’), });

console.log(error, fontsLoaded);

return { fontsLoaded, }; }; `

then the following error occurs

UPD: interesting that loading remote fonts is still working, so will use it as a temporary workaround to make app working.