svg assets and react navigation default header back button not appearing in eas build

Expo Application Services (EAS)
1
  • Bare workflow
  • eas-cli version: 0.54.1

My eas production build (eas build --profile production) doesn’t show certain assets. These assets ARE available in my eas development build (eas build --profile development). This indicates to me that this is a bundling error specific to production builds.

Particularly, there are two types of assets that are not showing in the production build:

  1. png files, which are stored in the root assets folder
  2. The default back button in the react navigation headers whenever you push into a new screen

This is what my metro.config.js file looks like:


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

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {     
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg', 'jsx', 'js', 'ts', 'tsx', 'cjs']
    }
  }
})();

I am a little surprised that the png files are not appearing, because according to the Expo documentation for Customizing Metro (Customizing Metro - Expo Documentation), png files are included by default.

Our babel.config.js looks like this:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

This is my package.json:

{
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@apollo/client": "^3.3.8",
    "@gorhom/bottom-sheet": "^2",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/datetimepicker": "4.0.0",
    "@react-native-community/hooks": "^2.6.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-picker/picker": "2.2.1",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/stack": "^5.14.2",
    "@sentry/react-native": "^3.3.5",
    "apollo-link-ws": "^1.0.20",
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "expo": "^44.0.0",
    "expo-analytics-segment": "~11.1.0",
    "expo-application": "~4.0.1",
    "expo-blur": "~11.0.0",
    "expo-clipboard": "~2.1.0",
    "expo-constants": "~13.0.1",
    "expo-contacts": "~10.1.0",
    "expo-dev-client": "~0.8.4",
    "expo-device": "~4.1.0",
    "expo-firebase-recaptcha": "~2.1.0",
    "expo-image-picker": "~12.0.1",
    "expo-linear-gradient": "~11.0.3",
    "expo-linking": "~3.0.0",
    "expo-location": "~14.0.1",
    "expo-media-library": "~14.0.0",
    "expo-navigation-bar": "~1.1.1",
    "expo-notifications": "~0.14.0",
    "expo-sharing": "~10.1.0",
    "expo-sms": "~10.1.0",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "expo-store-review": "~5.1.0",
    "expo-system-ui": "~1.1.0",
    "expo-updates": "~0.11.6",
    "firebase": "8.2.3",
    "graphql": "^15.5.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-doorman": "^1.4.0",
    "react-native-elements": "^3.1.0",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-google-mobile-ads": "^7.0.1",
    "react-native-google-places-autocomplete": "^2.2.0",
    "react-native-maps": "0.29.4",
    "react-native-paper": "^4.11.2",
    "react-native-purchases": "^4.5.3",
    "react-native-reanimated": "~2.3.1",
    "react-native-redash": "^16.2.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "^3.13.1",
    "react-native-view-shot": "3.1.2",
    "react-native-web": "0.17.1",
    "react-native-webview": "11.14.3",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "sentry-expo": "^4.0.0",
    "subscriptions-transport-ws": "^0.9.18"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-dom": "~17.0.9",
    "@types/react-native": "~0.64.12",
    "eslint-config-nando": "^1.1.0",
    "typescript": "~4.3.5"
  },
  "private": true,
  "version": "1.0.0"
}

Let me know if anyone has any pointers!!

2

It looks like I was not extending @expo/metro-config and was ignoring the following error while building:

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.

In order to remove the error, I changed my metro.config.js file to the following:

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

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

  return {
    ...config,
    transformer: {
      ...transformer,
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {     
      ...resolver,
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, 'svg', 'jsx', 'js', 'ts', 'tsx', 'cjs', 'png']
    }
  }
})();

I have now built the bundle without the error and will resubmit to see if I can now see the assets by default!

1 Like