Duplicate __self prop found.

[acalvino4]

After installing react-native-svg-transformer, and following the setup instructions, verbatim, I get the following error in my app:

error: src/App.tsx: Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config.

I am using the metro.config.js exactly as it is posted in setup instructions, and by toggling the line babelTransformerPath: require.resolve('react-native-svg-transformer'), I can make the error come and go. (When the line is commented, i get other errors indicating my SVG module is not of the expected type, as one would expect, since it isn't being transformed; I am not concerned about this case.)

[acalvino4]

My babel.config.json looks like this:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    [
      "module-resolver",
      {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx",
          ".android.js",
          ".android.tsx",
          ".ios.js",
          ".ios.tsx",
          ".svg"
        ],
        "root": ["./src"]
      }
    ],
    "react-native-reanimated/plugin"
  ]
}

[mariomurrent-softwaresolutions]

Did you solve this?

[karims10]

I'm facing the same issue, but I don't have react-native-svg-transformer as dependancy. Any update on this please ?

[GoodestUsername]

Yeah this is pretty important. Any updates?

[airowe]

Any update here?

[CCB-cerivera]

Do you have a solution for this error?

[airowe]

I found that pinning all metro versions to be in lockstep with each other resolved this issue for me.

metro-babel-register, metro, metro-react-native-babel-preset, metro-react-native-babel-transformer, `metro-resolver, et al.

[CCB-cerivera]

The problem is that these 2 babel libraries are deprecated for version 73 of RN and version 50 of Expo:

metro-react-native-babel-preset, metro-react-native-babel-transformer

[CCB-cerivera]

Hello, I just had the same problem, the solution was to remove ['module:@react-native/babel-preset', { "useTransformReactJSXExperimental": true }]] after this you will have to verify some libraries, I recommend deleting the node_modules , .lock after this and compile again.

It should look like this:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo', 
    plugins: [
      'react-native-reanimated/plugin',
    ],
  };
};

[aryan127]

remove module:@react-native/babel-preset and solved

[danielbogomazov]

Removing @react-native/babel-preset might lead to issues, so I’ll avoid doing that.

I suspect the problem originates from the upstreamTransformer function. Since I’m using React Native v0.74, it should be using @react-native/metro-babel-transformer (which replaced metro-react-native-babel-transformer in RN v0.73). My app incorporates Expo libraries but does not rely on the Expo framework itself, which seems to be causing the issue.

I adjusted the function to use only @react-native/metro-babel-transformer, and it appears to be working now. This likely indicates that importing @expo/metro-config/babel-transformer in a non-Expo project triggers the bug.

Here’s a temporary solution specifically for Bare React Native apps (version >= 0.73) that use Expo libraries: react-native-svg-transformer+1.4.0.patch.

If you are using a Bare React Native app with a version < 0.73 with Expo libraries, you could try modifying the patch to include only metro-react-native-babel-transformer instead of @react-native/metro-babel-transformer.

A permanent fix would likely involve determining whether the project is a Bare React Native app or an Expo app.

Related: https://github.com/kristerkari/react-native-svg-transformer/issues/333