react-native-svg-transformer 不适用于 Metro.config.js 文件

Question

我目前正在尝试使用 React Native SVG 在我的 RN 应用程序中渲染 SVG 组件。但是，metro.config.js 配置会导致一些我似乎无法解决的错误。

我已经安装了react-native-svg和react-native-svg-transformer并组合了metro配置文件，如下所示：

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"]
    }
  };
})();

但是，我总是收到以下错误：

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

我尝试重新启动npm start -- --reset-cache并在使用配置文件后，我注意到是异步导致了问题。由于父函数没有等待，因此无法找到该变量。使用 getDefaultConfig() 时我无法解决这个问题。我该如何解决这个问题？

Answer 1

这适用于 RN 0.72.3

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

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = async () => {
  const defaultConfig = await getDefaultConfig(__dirname);
  const {
    resolver: {sourceExts, assetExts},
  } = defaultConfig;

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

module.exports = config;

Answer 2

这对我有用：

const { assetExts, sourceExts } = require('metro-config/src/defaults/defaults');
const blacklist = require('metro-config/src/defaults/blacklist');
const { getDefaultConfig, mergeConfig } = require("metro-config");

const cfg = async () => await getDefaultConfig();

module.exports = mergeConfig(cfg, {
    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"],
        blacklistRE: blacklist([/ios\/build\/.*/])
    }
});