I am building an app with React Native and using Expo CLI. I am having a problem with missing assets once the app is built and testing on test flight. I am getting the error below. I have read through the documents on react native and expo and I cannot seem to figure out the problem. Also attached is my app.json and the metro.config.js files.

It looks like that you are using a custom metro.config.js that does not extend @expo/metro-config.
This can result in unexpected and hard to debug issues, like missing assets in the production bundle.
We recommend you to abort, fix the metro.config.js, and try again.

app.json

{
  "expo": {
    "name": "Unfiltered",
    "slug": "unfiltered-with-kiran",
    "version": "1.0.5",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "blahblahblah",
      "buildNumber": "1"
    },
    "android": {
      "versionCode": 2,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "blahblahblah"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

I am building an app with React Native and using Expo CLI. I am having a problem with missing assets once the app is built and testing on test flight. I am getting the error below. I have read through the documents on react native and expo and I cannot seem to figure out the problem. Also attached is my app.json and the metro.config.js files.

It looks like that you are using a custom metro.config.js that does not extend @expo/metro-config.
This can result in unexpected and hard to debug issues, like missing assets in the production bundle.
We recommend you to abort, fix the metro.config.js, and try again.

app.json

{
  "expo": {
    "name": "Unfiltered",
    "slug": "unfiltered-with-kiran",
    "version": "1.0.5",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "blahblahblah",
      "buildNumber": "1"
    },
    "android": {
      "versionCode": 2,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "blahblahblah"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

metro.config.js

const { getDefaultConfig } = require('expo/metro-config');
module.exports = (async () => {
    const {
        resolver: { sourceExts, assetExts },
    } = await getDefaultConfig(__dirname);
    return {
        resolver: {
            assetExts: [
                ...assetExts,
                'png',
                'jpg',
                'jpeg',
                'gif',
                'svg',
                'ttf',
                'otf',
                'woff',
                'woff2',
            ],
            sourceExts: [
                ...sourceExts,
                'cjs',
                'jsx',
                'ts',
                'tsx',
                'mjs',
                'md',
                'mdx',
            ],
        },
    };
})();

• javascript
• react-native
• mobile
• expo

2 Answers 2

I finally found the answer, I had to add the transformer and assetPlugins.

 transformer: {
      assetPlugins: ['expo-asset/tools/hashAssetFiles'],
    },

change the metro.config.js file to include :

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

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push("hcscript");
defaultConfig.transformer.assetPlugins = ["expo-asset/tools/hashAssetFiles"];

module.exports = defaultConfig;