how to configure metro.config.js in 0.72.0

[adsalihac]

This version they are changed metro config.

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config'); const config = {}; module.exports = mergeConfig(getDefaultConfig(__dirname), config);

[ngondat97]

same issue

[jackfiallos]

I have added something like this, metro its running now but I haven't confirmed if the app will work after a RN 0.72.0 upgrade

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts;
const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts;
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

module.exports = mergeConfig(getDefaultConfig(__dirname), {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: true,
            },
        }),
    },
    resolver: {
        assetExts: defaultAssetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...defaultSourceExts, 'svg'],
    },
});

[adsalihac]

yes

[stefkampen]

works like a charm

[bayuengx1]

I have added something like this, metro its running now but I haven't confirmed if the app will work after a RN 0.72.0 upgrade

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts;
const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts;
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

module.exports = mergeConfig(getDefaultConfig(__dirname), {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: true,
            },
        }),
    },
    resolver: {
        assetExts: defaultAssetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...defaultSourceExts, 'svg'],
    },
});

Very helping bro, thank u so much. You save my life 😭

[abgaryanharutyun]

I have added something like this, metro its running now but I haven't confirmed if the app will work after a RN 0.72.0 upgrade

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts;
const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts;
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

module.exports = mergeConfig(getDefaultConfig(__dirname), {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: true,
            },
        }),
    },
    resolver: {
        assetExts: defaultAssetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...defaultSourceExts, 'svg'],
    },
});

Thank you so much @jackfiallos, this works 100000% 🚀

[RominHalltari]

This does not work for me, I'm getting the following error:

[Adnan-Bacic]

I have added something like this, metro its running now but I haven't confirmed if the app will work after a RN 0.72.0 upgrade

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts;
const defaultAssetExts = require('metro-config/src/defaults/defaults').assetExts;
/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */

module.exports = mergeConfig(getDefaultConfig(__dirname), {
    transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: true,
            },
        }),
    },
    resolver: {
        assetExts: defaultAssetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...defaultSourceExts, 'svg'],
    },
});

this works for me. i have made a small change. i think the empty config variable in the new template is meant as a way to have our own config for readability if we want to avoid writing our own config inside the default config. then the new mergeConfig function merges them together.

so alternatively, i have it like this:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const sourceExts = require('metro-config/src/defaults/defaults').sourceExts;
const assetExts = require('metro-config/src/defaults/defaults').assetExts;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => {
        return {
          transform: {
            experimentalImportSupport: false,
            inlineRequires: true,
          },
        };
      },
    },
    resolver: {
      assetExts: assetExts.filter((ext) => { return ext !== 'svg'; }),
      sourceExts: [...sourceExts, 'svg'],
    },
};

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

[kristerkari]

I'll update the docs as soon as I have tested that everything works with the suggested config / PR 🙂

[wjaykim]

From React Native 0.72.1 (with "@react-native/metro-config": "^0.72.7"), following works, too:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

[trmylinh]

This does not work for me, I'm getting the following error:

Do you have a solution to fix that ?

[wjaykim]

@trmylinh Run react-native start --reset-cache

[trmylinh]

@trmylinh Run react-native start --reset-cache

when I run react-native --resert-cache, it throw error 'Cannot read properties of undefined (reading 'filter').' in file metro.config.js @@

[wjaykim]

when I run react-native --resert-cache, it throw error 'Cannot read properties of undefined (reading 'filter').' in file metro.config.js @@

You should update react-native to 0.72.1 and @react-native/metro-config to ^0.72.7

[trmylinh]

when I run react-native --resert-cache, it throw error 'Cannot read properties of undefined (reading 'filter').' in file metro.config.js @@

You should update react-native to 0.72.1 and @react-native/metro-config to ^0.72.7

yeah, I have done update version like that, but it throw same error T.T

[trmylinh]

@trmylinh Run react-native start --reset-cache

oh now it works, thank you so much

[adsalihac]

https://github.com/kristerkari/react-native-svg-transformer/blob/master/README.md

it is updated in README.md file.

[MobileMon]

In addition to what was said above, I also had to run

npm install @react-native/metro-config