Duplicate __self prop found

[matinzd]

Description

After building the app, when metro tries to bundle the app it fails with the following error:

2024-05-03 07:02:12.186 [error] src/app/App.tsx: /Users/****/work/kreddy-frontend/apps/kreddy-mobile/src/app/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.
  54 |           <SafeAreaProvider>
  55 |             {Platform.OS === 'android' && (
> 56 |               <StatusBar
     |               ^
  57 |                 barStyle="dark-content"
  58 |                 backgroundColor={'transparent'}
  59 |                 animated

Might be related to monorepo stuff since I am using NX.

Metro Config:

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

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const customConfig = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== 'svg'),
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
  },
};

module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
  // Change this to true to see debugging info.
  // Useful if you have issues resolving modules
  debug: false,
  // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
  extensions: [],
  // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
  watchFolders: [],
});

My babel config:

module.exports = function (api) {
  api.cache(true);

  if (
    (process.env.NX_TASK_TARGET_TARGET !== undefined &&
      process.env.NX_TASK_TARGET_TARGET === 'build') ||
    process.env.NX_TASK_TARGET_TARGET?.includes('storybook')
  ) {
    return {
      presets: [
        [
          '@nx/react/babel',
          {
            runtime: 'automatic',
          },
        ],
      ],
      plugins: [
        '@babel/plugin-proposal-export-namespace-from',
        'react-native-reanimated/plugin',
      ],
    };
  }

  return {
    presets: [
      ['module:@react-native/babel-preset', { useTransformReactJSX: true }],
    ],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Screenshot

Environment

React Native IDE: 0.0.9 React Native: 0.74.0

[matinzd]

I tracked down the code and might be related to this line:

https://github.com/software-mansion/react-native-ide/blob/ce69fd839e386a63a908003ecd0771c8a24b9c4c/packages/vscode-extension/lib/babel_transformer.js#L17

[matinzd]

Tried commenting out the L16:L17 and it fixed the issue for me. Do you think it's still relevant to pull the dev version of @babel/plugin-transform-react-jsx?

https://github.com/software-mansion/react-native-ide/blob/ce69fd839e386a63a908003ecd0771c8a24b9c4c/packages/vscode-extension/lib/babel_transformer.js#L16-L17

[subramanian-elavathur]

Description

Seeing the same error as @matinzd however on a standard react native app created from the react-native-cli.

[error] src/App.tsx: /Users/**/Workspace/my-app/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.
  41 |           }}>
  42 |           <PortalProvider>
> 43 |             <Navigation />
     |             ^^^^^^^^^^^^^^
  44 |             <Calendar />
  45 |             <PortalHost name={BOTTOM_SHEET_PORTAL} />
  46 |             {/* {__DEV__ ? null : (

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

metro.config.js

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

const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

Environment

React Native IDE: 0.0.9 React Native: 0.73.7

[rocket13011]

Same Error :

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
    [
      "babel-plugin-root-import",
      {
        "rootPathSuffix": "src", // Assuming you put all the code in Src folder
        "rootPathPrefix": "@pc/"
      }
    ]
  ]
};

metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };

module.exports = mergeConfig(defaultConfig, config);

Environment

React Native IDE: 0.0.9 React Native: 0.74.0

[Martinocom]

I have the same error on my personal project, but not the company one. Dependencies are the same, but in one App.tsx is in the root, in the other in the src folder. I check the dependencies of both and are pretty the same, expect for some fewer or different libraries used in my own project.

Not related to code btw, because removing everything and leaving the app with only a <View /> will result in the same error.

[matinzd]

Something to add here same as @Martinocom. My app entrypoint is located under src/main.tsx and I have configured it in build gradle and xcode.env:

entryFile = file("../../src/main.tsx")

export ENTRY_FILE="${PROJECT_DIR}/../src/main.tsx"

[matinzd]

Reproducible: https://github.com/matinzd/react-native-ide-nx-repro @kmagiera

[CoryWritesCode]

same issue as above on iOS builds

[kmagiera]

This issue turned out to be a problem with svg transformer: https://github.com/matinzd/react-native-ide-nx-repro/blob/main/apps/react-native-ide-nx-repro-mobile/metro.config.js#L15

The transformer wasn't forwarding some of the properties to the upstream version of transformer and I submitted a PR to fix that here: https://github.com/kristerkari/react-native-svg-transformer/pull/354

I also found another way to workaround this issue without the need for a fix in svg transformer. Can other people here confirm that you've been using that transformer in your setups?

[subramanian-elavathur]

I can confirm we were using react-native-svg-transformer. Thanks for the fix - hope to try the new build soon.

[seanpcoyle]

This issue turned out to be a problem with svg transformer: https://github.com/matinzd/react-native-ide-nx-repro/blob/main/apps/react-native-ide-nx-repro-mobile/metro.config.js#L15

The transformer wasn't forwarding some of the properties to the upstream version of transformer and I submitted a PR to fix that here: kristerkari/react-native-svg-transformer#354

I also found another way to workaround this issue without the need for a fix in svg transformer. Can other people here confirm that you've been using that transformer in your setups?

I was running into this issue and I can confirm that I am also using react-native-svg-transformer.

[phuongnn1996]

Tried commenting out the L16:L17 and it fixed the issue for me. Do you think it's still relevant to pull the dev version of @babel/plugin-transform-react-jsx?

https://github.com/software-mansion/react-native-ide/blob/ce69fd839e386a63a908003ecd0771c8a24b9c4c/packages/vscode-extension/lib/babel_transformer.js#L16-L17

Hi. How did you commented it? I'm facing this issue even if I installed react-native-svg-transformer 1.4.0 or commented the babelTransformerPath: require.resolve('react-native-svg-transformer').