Monorepo problem: TypeError: source.split is not a function. (In 'source.split('\n')', 'source.split' is undefined)

Hi, First of all thank you for making/maintaining this awesome library. I would like to import local .svg file and transform into SvgXml component. This library works fine when added into bare react-native project. But i have issues to working with monorepo. I tried same steps as standalone react-native project, but didnt work. I logged Android.svg file and it printed “1” to console. I think metro bundler doesn’t transform well svg file. You can produce this error by cloning project: https://github.com/ozcanzaferayan/react-native-twitter/tree/svg-error Thank you.

error logs:

TypeError: source.split is not a function. (In 'source.split('\n')', 'source.split' is undefined)

This error is located at:
    in SvgXml (at mobile/index.js:9)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

locate
    xml.tsx:239:29
error
    xml.tsx:277:45
parse
    xml.tsx:533:10
useMemo$argument_0
    xml.tsx:106:65
useMemo$argument_0
    xml.tsx:106:37
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
renderApplication
    renderApplication.js:52:52
runnables.appKey.run
    AppRegistry.js:116:10
runApplication
    AppRegistry.js:197:26
callFunctionReturnFlushedQueue
    [native code]:0

index.js:

import * as React from 'react';
import { AppRegistry, SafeAreaView } from 'react-native';
import { name as appName } from './app.json';
import { SvgXml } from 'react-native-svg';
import Android from './android.svg';

const App = () => {
  return (
    <SvgXml width="100%" height="100%" xml={Android} />
  );
};

AppRegistry.registerComponent(appName, () => App);

metro.config.js:

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    projectRoot: path.resolve(__dirname, '../../'),
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

package.json

{
  "name": "mobile",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "compile": "tsc -b --incremental",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "prestart": "npm run compile",
    "start": "concurrently \"npm run compile -- -w\" \"react-native start\"",
    "studio": "studio android",
    "test": "jest",
    "xcode": "open ios/myprojectname.xcworkspace"
  },
  "dependencies": {
    "common": "1.0.0",
    "react": "16.12.0",
    "react-native": "0.61.5",
    "react-native-localize": "^1.3.3",
    "react-native-svg": "^11.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "0.0.7",
    "@types/react": "16.9.19",
    "@types/react-native": "0.61.12",
    "babel-jest": "25.1.0",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "eslint": "6.8.0",
    "jest": "25.1.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-test-renderer": "16.12.0",
    "typescript": "3.7.5"
  },
  "jest": {
    "preset": "react-native"
  }
}

[msand]

It seems you haven’t configured react-native-svg-transformer correctly

[wohan]

I have this problem. I add

[
  'babel-plugin-inline-import',
  {
    extensions: ['.svg'],
  },
],

in file babel.config.js

and run

“watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start – --reset-cache”

and I see my Icon!