Compatibility with expo-asset - AssetRegistry is expected inside Image, not a separate Library

[edkimmel]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the issue

In trying to upgrade our project to Expo 48 / React Native 0.71.4 we came across a build error with expo-asset.

It is trying to import AssetRegistry from react-native/Libraries/Image/AssetRegistry.

Looking at the react-native repository, this file has not been recently moved into the Image package. Referencing 0.60-stable to show that the version bundled into 0.18 of RNW also had the file under Image https://github.com/facebook/react-native/tree/0.60-stable/Libraries/Image

Expected behavior

Imports for react-native/Libraries/Image/AssetRegistry resolve when aliased to react-native-web.

Steps to reproduce

Include expo 48.0.7 in a build and import expo-assets, or attempt importing import { getAssetByID } from 'react-native/Libraries/Image/AssetRegistry'; directly

Test case

Unable to use this specific import line in sandbox.

Additional comments

I believe the AssetManager package should be merged inside Image, or if it can't be moved, aliases should be made under Image.

[necolas]

Reaching into intervals is not supported. If expo is doing that you should open an issue against expo, and they can import the path in RNW if they must

[ppong]

@necolas would you mind elaborating on how to import the path in RNW if they must. It seems like AssetRegistry is not exported from RNW. I am asking because I am trying to open a PR in expo to fix this

[ppong]

@necolas would you mind elaborating on how to import the path in RNW if they must. It seems like AssetRegistry is not exported from RNW. I am asking because I am trying to open a PR in expo to fix this

Answering my own question - one way to fix it is to add the following to webpack resolve.alias

    'react-native/Libraries/Image/AssetRegistry$':
      'react-native-web/dist/modules/AssetRegistry',

module.exports = async function (env: Environment, argv: Arguments) {
  const config = await createExpoWebpackConfigAsync(env, argv)
  config.resolve!.alias = {
    ...config.resolve!.alias,
    'react-native/Libraries/Image/AssetRegistry$':
      'react-native-web/dist/modules/AssetRegistry',
  };
  return config;
};

[thanksyouall]

@ppong thanks, it works. Did you open an issue in the expo repo?

[dohomi]

This solution does not seem to work with Vite as a package.json is missing in the dist folder of react-native-web. Do someone knows a solution for this?