Importing SVGs yields errors

[westhechiang]

Hi there! SUPER excited about the react-native integration y'all have. I have a non-NX monorepo that has an expo-based react-native app that is working with SVGs and when I migrated over to NX, the iOS app throws the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

When I comment out the component that is using SVGs the app works just fine. My SVG setup for an expo-based react-native app was based on instructions found in the docs in react-native-svg.

When I run the app in the web browser, SVGs work just fine, so the only issue is with react-native.

My metro.config.js looks like this:

const { withNxMetro } = require('nx-react-native-expo');
const { getDefaultConfig } = require('@expo/metro-config');
const { assetExts, sourceExts } = require('metro-config/src/defaults/defaults');
const { mergeConfig } = require('metro-config');

const defaultConfig = getDefaultConfig(__dirname);
const modifiedConfig = mergeConfig(defaultConfig, {
  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'],
  },
});
module.exports = withNxMetro(modifiedConfig);

[jaysoo]

Thanks for reporting, we'll take a look.

[davisk4rpi]

Im not using expo for my project, but I suspect it is because you are not waiting for getDefaultConfig() to return

Here is my working config:

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  const config = {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
  return await withNxMetro(config, {
    debug: false,
  });
})();

Hope that helps!

[isotopeee]

Im not using expo for my project, but I suspect it is because you are not waiting for getDefaultConfig() to return

Here is my working config:

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  const config = {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
  return await withNxMetro(config, {
    debug: false,
  });
})();

Hope that helps!

Did not work for me. I'm on nrwl/* version 12.9.0 BTW.

Here's my metro.config.js:

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

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

Here's how I'm trying to import the SVG:

import mySvg from './my-svg.svg';

Here's how the file structure looks like:

- Component.tsx // imports mySvg.svg
- my-svg.svg

Here's how the error looks like:

Path './my-svg' could not be found for '<absolute path of component>'

Still trying to figure this out. 🤯