how to configure metro.config.js in 0.72.0 #276

adsalihac · 2023-06-21T20:08:17Z

This version they are changed metro config.

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

The text was updated successfully, but these errors were encountered:

ngondat97 · 2023-06-22T02:26:04Z

same issue

jackfiallos · 2023-06-22T06:24:42Z

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 · 2023-06-22T08:23:09Z

yes

stefkampen · 2023-06-22T10:09:22Z

works like a charm

bayuengx1 · 2023-06-23T03:48:18Z

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 · 2023-06-27T02:04:48Z

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 · 2023-06-27T04:04:10Z

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

Adnan-Bacic · 2023-06-27T08:03:58Z

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);

Summary: Reverts facebook#36777. This is motivated by reducing user friction when the widespread assumption is for `react-native/metro-config` to export a complete Metro config, as with Expo/rnx-kit, and like previously understood uses of `metro-config`. See facebook/metro#1010 (comment) for further notes. Fixes: - facebook/metro#1010 - facebook#38069 - kristerkari/react-native-svg-transformer#276 Note that we do not intend for `react-native/metro-config` to directly export `assetExts` etc — these can be accessed on the `resolver` property from the full config object. Changelog: [General][Changed] `react-native/metro-config` now includes all base config values from `metro-config` Differential Revision: D47055973 fbshipit-source-id: 78b59d925be72aa42b4b9d901c6f8d174f2dbae0

Summary: Pull Request resolved: facebook#38092 Reverts facebook#36777. This is motivated by reducing user friction when the widespread assumption is for `react-native/metro-config` to export a complete Metro config, as with Expo/rnx-kit, and like previously understood uses of `metro-config`. See facebook/metro#1010 (comment) for further notes. Fixes: - facebook/metro#1010 - facebook#38069 - kristerkari/react-native-svg-transformer#276 Note that we do not intend for `react-native/metro-config` to directly export `assetExts` etc — these can be accessed on the `resolver` property from the full config object. Changelog: [General][Changed] `react-native/metro-config` now includes all base config values from `metro-config` Reviewed By: robhogan Differential Revision: D47055973 fbshipit-source-id: eedc4698e651645ada46a013d3945a16965bff22

Summary: Pull Request resolved: #38092 Reverts #36777. This is motivated by reducing user friction when the widespread assumption is for `react-native/metro-config` to export a complete Metro config, as with Expo/rnx-kit, and like previously understood uses of `metro-config`. See facebook/metro#1010 (comment) for further notes. Fixes: - facebook/metro#1010 - #38069 - kristerkari/react-native-svg-transformer#276 Note that we do not intend for `react-native/metro-config` to directly export `assetExts` etc — these can be accessed on the `resolver` property from the full config object. Changelog: [General][Changed] `react-native/metro-config` now includes all base config values from `metro-config` Reviewed By: robhogan Differential Revision: D47055973 fbshipit-source-id: 5ad23cc9700397110de5c0e81c7d76299761ef0a

kristerkari · 2023-06-29T22:00:18Z

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

wjaykim · 2023-06-30T02:44:41Z

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 · 2023-06-30T03:10:47Z

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

Do you have a solution to fix that ?

wjaykim · 2023-06-30T03:12:46Z

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

trmylinh · 2023-06-30T03:22:27Z

@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 · 2023-06-30T03:25:22Z

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 · 2023-06-30T03:27:04Z

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 · 2023-06-30T03:40:58Z

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

oh now it works, thank you so much

adsalihac · 2023-07-08T06:09:24Z

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

it is updated in README.md file.

MobileMon · 2023-08-23T14:00:07Z

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

npm install @react-native/metro-config

abgaryanharutyun mentioned this issue Jun 27, 2023

@react-native/metro-config doesn't export default assetExts and sourceExts anymore. facebook/react-native#38069

Closed

This was referenced Jun 27, 2023

[docs] Add Metro configuration guide, update Metro config references facebook/react-native-website#3772

Merged

Restore base config merge in metro-config facebook/react-native#38092

Closed

adsalihac mentioned this issue Jun 30, 2023

React native 0.72.1 and above metro.config.js #277

Merged

adsalihac closed this as completed Jul 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to configure metro.config.js in 0.72.0 #276

how to configure metro.config.js in 0.72.0 #276

adsalihac commented Jun 21, 2023

ngondat97 commented Jun 22, 2023

jackfiallos commented Jun 22, 2023

adsalihac commented Jun 22, 2023

stefkampen commented Jun 22, 2023

bayuengx1 commented Jun 23, 2023

abgaryanharutyun commented Jun 27, 2023

RominHalltari commented Jun 27, 2023

Adnan-Bacic commented Jun 27, 2023

kristerkari commented Jun 29, 2023

wjaykim commented Jun 30, 2023 •

edited

Loading

trmylinh commented Jun 30, 2023

wjaykim commented Jun 30, 2023

trmylinh commented Jun 30, 2023

wjaykim commented Jun 30, 2023 •

edited

Loading

trmylinh commented Jun 30, 2023

trmylinh commented Jun 30, 2023

adsalihac commented Jul 8, 2023

MobileMon commented Aug 23, 2023

how to configure metro.config.js in 0.72.0 #276

how to configure metro.config.js in 0.72.0 #276

Comments

adsalihac commented Jun 21, 2023

ngondat97 commented Jun 22, 2023

jackfiallos commented Jun 22, 2023

adsalihac commented Jun 22, 2023

stefkampen commented Jun 22, 2023

bayuengx1 commented Jun 23, 2023

abgaryanharutyun commented Jun 27, 2023

RominHalltari commented Jun 27, 2023

Adnan-Bacic commented Jun 27, 2023

kristerkari commented Jun 29, 2023

wjaykim commented Jun 30, 2023 • edited Loading

trmylinh commented Jun 30, 2023

wjaykim commented Jun 30, 2023

trmylinh commented Jun 30, 2023

wjaykim commented Jun 30, 2023 • edited Loading

trmylinh commented Jun 30, 2023

trmylinh commented Jun 30, 2023

adsalihac commented Jul 8, 2023

MobileMon commented Aug 23, 2023

wjaykim commented Jun 30, 2023 •

edited

Loading

wjaykim commented Jun 30, 2023 •

edited

Loading