Amplify EAS Metro config migration blockList

Question

When migrating to EAS, I was reading the Migration Docs and saw that EAS builds are requiring the entire defaultConfig from expo/metro-config. I was having a tough time looking into how to utilize this mtro.config.js...

const blacklist = require("metro-config/src/defaults/exclusionList")

module.exports = {
  resolver: {
    blacklistRE: blacklist([/amplify\/#current-cloud-backend\/.*/]),
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
}

So that I will not get the jest-haste-map error for duplicate file names if adding a function or some other errors that may come with other.

With this code, some images are not included in the build, so the question is how to utilize defaultConfig and avoid the jest-haste-map issue?

Answer 1

I wanted to simply share my solution, and I'm aware that there are expo build projects that used some variants of this metro.config.js or rn-cli.config.js to appropriately configure the metro bundler.

const blacklist = require("metro-config/src/defaults/exclusionList")

module.exports = {
  resolver: {
    blacklistRE: blacklist([/amplify\/#current-cloud-backend\/.*/]),
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
}

I wasn't able to find documentation on what the const defaultConfig = getDefaultConfig(__dirname) from expo/metro-config structure looks like (maybe someone can comment a link?) and just had to wing it. This worked for configuring the blockList (not the blackListRE) resolver and load my images appropriately:

metro.config.js

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

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push('db');
defaultConfig.resolver.blockList = [/amplify\/#current-cloud-backend\/.*/];

module.exports = defaultConfig;

Per the Migration Docs, this is the ideal way to append any custom config options to the const defaultConfig = getDefaultConfig(__dirname) object. And you can see that I am setting blockList, so any other files you need to block could also be set to this array.

Hope this helps the Amplify people!