Problem with metro.config.js file

[jstnl]

I have installed react-native-svg and react-native-svg-transformer and combined the metro config file as such:

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

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

However, I always get the following error:

[Sun Feb 13 2022 17:49:52.470]  ERROR    ReferenceError: Can't find variable: config
[Sun Feb 13 2022 17:49:52.472]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Sun Feb 13 2022 17:49:52.473]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

I tried restarting with npm start -- --reset-cache and after playing around with the config file, I noticed that it was the async that was causing the issue. The variable couldn't be found since the parent function isn't awaiting. I can't get around this when using getDefaultConfig(). How can I get around this?

[lockieluke]

same

[imderi]

same here, any update?

[lockieluke]

nope i gave up

[osamasaeed]

I have react-native:0.71.3 with have same here, anyone found solution?

[zoobibackups]

I have the same problem. The problem was I didn't read the documentation correctly. Here is the correct metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"]
  }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package.json file

"react": "18.2.0",
 "react-native": "0.72.4",