metro: Transformer for asset does not work

Do you want to request a feature or report a bug? Bug

What is the current behavior? I am trying to create a transformer that process .svg files. Currently it only feed .js files to the transformer not .svg files

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

yarn install
react-native run-ios / react-native run android
check metro packager log for .svg file (console.log from transformer. see svg_transformer)

Minimal repository: https://github.com/kruyvanna/metro-asset-transformer-test

What is the expected behavior? transformer.transform get called with .svg file

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system. i have rn-cli.config.js with the following content

module.exports = {  
  assetTransforms: true,
  getPlatforms: () => ["ios", "android"],
  getTransformModulePath() {  	        
    	return require.resolve('./svg_transformer')    
  },
  getAssetExts() {
    return ["svg"];
  }
};

node: v8.9.1 yarn: 1.7.0 npm: 5.6.0 react-native-cli: 2.0.1 react-native: 0.55.4

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 29 (6 by maintainers)

Most upvoted comments

@idudinov @fdagostino the docs for react-native-svg-transformer have been updated to include the correct config for expo-cli 3.x https://github.com/kristerkari/react-native-svg-transformer#for-react-native-v057-or-newer--expo-sdk-v3100-or-newer

kristerkari on Aug 1, 2019

I managed to get the .svg images to load in React Native!

The config to do that is very verbose because I also need to modify assetExts no to include svg file extension:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();

  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

That’s pretty difficult to understand for someone who is not familiar with Metro at all.

kristerkari on Sep 11, 2018

Phew! Downgrading XCode did not help, but downgrading Expo CLI did. Replaced 3.0.x with 2.21.2 and the problem has gone. Spent only a day to work around this! 😂

idudinov on Jul 25, 2019

Hi @sometimescasey!

Thank you very much! It works! I have tried this in the past, but I think I omitted ‘jpg’ and since I know it was a default asset extension I just tried to extend the config as others have done before. But this is ok and since it works it is all I need.

isbirkan on Nov 5, 2018

Would it be possible to have some config property that would just add the file extension to the default ones instead of replacing them?

Would be great to keep the config as simple as my previous example:

module.exports = {
  transformModulePath: require.resolve("react-native-svg-transformer"),
  resolver: {
    sourceExts: ["svg"]
  }
};

kristerkari on Sep 11, 2018

I’m having problems to get the new Metro configuration to work.

I have been trying out the 0.57.0-rc.2 version of React Native, which also includes the new Metro config. I’m using a working 0.56.0 project as the base.

I’ve read the code changes from React Native’s side and the updated docs for Metro, and based on that my updated rn-cli.config.js for transforming SVG files looks like this:

module.exports = {
  transformModulePath: require.resolve("react-native-svg-transformer"),
  resolver: {
    sourceExts: ["svg"]
  }
};

The new config however just makes Metro throw an error:

error: bundling failed: ReferenceError: SHA-1 for file /Users/kristerkari/Git/SVGDemo/index.js is not computed
    at DependencyGraph.getSha1 (/Users/kristerkari/Git/SVGDemo/node_modules/metro/src/node-haste/DependencyGraph.js:236:119)
    at /Users/kristerkari/Git/SVGDemo/node_modules/metro/src/Bundler.js:203:56
    at Generator.next (<anonymous>)
    at step (/Users/kristerkari/Git/SVGDemo/node_modules/metro/src/Bundler.js:11:657)
    at /Users/kristerkari/Git/SVGDemo/node_modules/metro/src/Bundler.js:11:817
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

@rafeca do you have any ideas why that might happen?

kristerkari on Aug 24, 2018

Yes, they fix it

rafeca on Aug 3, 2018