How to merge async function config @expo/metro-config with @ui-kitten/metro-config?

[CostachescuCristinel]

I am trying to merge react-native-svg-transformer in an expo bare workflow environment. The docs state that I should merge the following config with whatever I have:

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

@ui-kitten/metro-config will not accept an async function as a parameter (as far as I can see, it uses lodash.merge, which is a copy of Object.assign()). Also, UI Kitten requires @ui-kitten/metro-config to run in order to apply any cusom mapping. Not running it will simply fall back to not optmizing the theme config at bundle time.

I am very unsure how to merge that config using create from @ui-kitten/metro-config. For now I am using the following:

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

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

    const uiKittenConfig = UIKittenMetroConfig.create({
        evaPackage: "@eva-design/eva",
        customMappingPath: "./theme/mapping.json",
    });

    return {
        transformer: {
            assetPlugins: ['expo-asset/tools/hashAssetFiles'],
            babelTransformerPath: require.resolve("react-native-svg-transformer")
        },
        resolver: {
            assetExts: assetExts.filter(ext => ext !== "svg"),
            sourceExts: [...sourceExts, "svg"]
        },
        ...uiKittenConfig
    };
})();

I can see the message success Successfully bootstrapped @eva-design/eva, but I am not sure whether this is the proper way of doing it. I can see that the .create() call returns an object with a reporter field, a general field in the metro config options.

@artyorsh Can you please point me the right way ?

[artyorsh]

👋 there.

I've never tried working with async module export to be honest. But you're doing everything right while you see this Successfully bootstrapped @eva-design/eva message 😄

Since you're awaiting for the default config, you're still able to merge it according to the docs, right?

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

    return UIKittenMetroConfig.create({
        evaPackage: "@eva-design/eva",
        customMappingPath: "./theme/mapping.json",
    }, {
        transformer: {
            assetPlugins: ['expo-asset/tools/hashAssetFiles'],
            babelTransformerPath: require.resolve("react-native-svg-transformer")
        },
        resolver: {
            assetExts: assetExts.filter(ext => ext !== "svg"),
            sourceExts: [...sourceExts, "svg"]
        },
    });
})();

[CostachescuCristinel]

Since you're awaiting for the default config, you're still able to merge it according to the docs, right?

I thought I would, but apparently not. When I tried to run the config as you posted, the message Successfully bootstrapped @eva-design/eva did not appear.

And I say "did" because today I don't get that message anymore, no matter what config I use or if I clean the react native cache. Since yesterday I have installed some libs and did changes back and forth, I guess I've broken something... I will try this on a new project from scratch and let you know if it works. In the meantime, thank you :)

[CostachescuCristinel]

Nevermind, might have been just an NPM/yarn cache thingy, deleting node_modules and installing packages again seems to do the trick.

Apparently, @artyorsh, your suggestion, as well as my original code, works! I guess the way you suggested is the more appropriate way though, so I'm going for it.

Thank you again :)