Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does not working with react native 0.60.4 - Invariant Violation

See original GitHub issue

Facing a issue with react-native-svg-transformer with react native latest version 0.60.4

react-native-svg is working fine with react-native 0.60.4

This is public git repo I have created for example react-native-svg-transformer with react-native 0.60.4 - https://github.com/dilipchandima/reactNative6SVG

following are my configurations for react native

package.json

{
  "name": "svg",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.4",
    "react-native-svg": "^9.5.3"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "eslint": "^6.1.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-native-svg-transformer": "^0.13.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

metro.config

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

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

const defaultModule = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

module.exports = mergeConfig(svgModule, defaultModule);

Issue Analytics

State:
Created 4 years ago
Comments:10 (1 by maintainers)

Top GitHub Comments

17reactions

dilipchandimacommented, Aug 1, 2019

after I change the metro config as following it works


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

8reactions

OzzyTheGiantcommented, Dec 31, 2019

If anyone is using Expo with their project, restart the development server. Apparently you need to do this to load config file correctly. It’s such a simple thing that anyone could miss but that helped me out after getting the same exact error. Can confirm this is working with default metro.config.js, typescript declaration file, .svgrrc file, and app.json settings.