Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
adsalihac opened this issue Jun 21, 2023 · 18 comments
Closed

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

adsalihac opened this issue Jun 21, 2023 · 18 comments

Comments

@adsalihac
Copy link
Contributor

This version they are changed metro config.

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

@ngondat97
Copy link

same issue

@jackfiallos
Copy link

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
Copy link
Contributor Author

yes

@stefkampen
Copy link

works like a charm

@bayuengx1
Copy link

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
Copy link

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
Copy link

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

@Adnan-Bacic
Copy link

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

huntie added a commit to huntie/react-native that referenced this issue Jun 27, 2023
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
huntie added a commit to huntie/react-native that referenced this issue Jun 28, 2023
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
facebook-github-bot pushed a commit to facebook/react-native that referenced this issue Jun 28, 2023
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
kelset pushed a commit to facebook/react-native that referenced this issue Jun 28, 2023
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
Copy link
Owner

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

@wjaykim
Copy link

wjaykim commented Jun 30, 2023

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
Copy link

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

Do you have a solution to fix that ?

@wjaykim
Copy link

wjaykim commented Jun 30, 2023

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

@trmylinh
Copy link

@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
Copy link

wjaykim commented Jun 30, 2023

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
Copy link

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
Copy link

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

oh now it works, thank you so much

@adsalihac
Copy link
Contributor Author

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

it is updated in README.md file.

@MobileMon
Copy link

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

npm install @react-native/metro-config

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

13 participants