Duplicate __self prop found #198

matinzd · 2024-05-03T05:07:51Z

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

The text was updated successfully, but these errors were encountered:

matinzd · 2024-05-03T05:20:27Z

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 · 2024-05-03T05:35:42Z

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 · 2024-05-03T10:12:46Z

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 · 2024-05-03T18:05:02Z

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 · 2024-05-06T08:54:04Z

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 · 2024-05-06T11:44:53Z

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 · 2024-05-06T12:09:24Z

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

CoryWritesCode · 2024-05-07T15:40:59Z

same issue as above on iOS builds

Fixes #198 This is another approach at resolving the complexity of enabling development JSX transforms. As noted in #198 the old approach would sometimes produce an error that the development transform throws when other instance of dev JSX transform run, or when some of jsx-self or jsx-source transforms are run on the same file along with the jsx dev version. The problem in the repro provided in #198 was due to the use of quite popular react-native-svg-transformer which doesn't forward `plugins` attribute to the upstream transformer. I proposed a fix for this issue in that repo kristerkari/react-native-svg-transformer#354 however, it isn't practical to wait for a fix there and hence the PR implements another workaround that doesn't depend on the `plugins` attribute of the transformer. The new approach relies on additional flag that is turned on when non-dev version of the plugin is loaded. What we try to achieve is that only jsx-dev transform is listed as plugin, and other varians (non-dev, -self, and -source) versions are all turned off. Since we can't hijack the plugins list, the only option is to use require overwrites. Furthermore, we need to consider the case when someone has a proper setup where only dev transform is listed and others are not. If we were to only overwrite non-deb with dev version, that wouldn't suffice for this particular case. What we now do is: 1) disable -self and -source transforms entirely (read inline comment for details on why we can do it) 2) replace non-dev JSX transform with dev version, and also use a flag to mark when this replaced non-dev version is used 3) replace dev JSX transform with extra logic that checks for the flag that marks whether non-dev version is used. If it is used, we return an empty transform. Otherwise, we just return the dev transform as it means that non-dev isn't registered. As stated in the inline comment, this approach would break if someone has dev transform registered before non-dev. Apparently, I don't see a better way to move forward with this approach and I'd hope that the current solution would cover the majority of setups.

kmagiera · 2024-05-08T10:02:21Z

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?

subramanian-elavathur · 2024-05-08T10:03:58Z

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

seanpcoyle · 2024-05-08T18:29:21Z

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 · 2024-05-24T18:05:42Z

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').

kmagiera mentioned this issue May 8, 2024

Yet another attempt at solving jsx babel transform overwrites #216

Merged

kmagiera closed this as completed in #216 May 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Duplicate __self prop found #198

Duplicate __self prop found #198

matinzd commented May 3, 2024 •

edited

Loading

matinzd commented May 3, 2024 •

edited

Loading

matinzd commented May 3, 2024 •

edited

Loading

subramanian-elavathur commented May 3, 2024

rocket13011 commented May 3, 2024

Martinocom commented May 6, 2024

matinzd commented May 6, 2024

matinzd commented May 6, 2024 •

edited

Loading

CoryWritesCode commented May 7, 2024

kmagiera commented May 8, 2024

subramanian-elavathur commented May 8, 2024 •

edited

Loading

seanpcoyle commented May 8, 2024

phuongnn1996 commented May 24, 2024

Duplicate __self prop found #198

Duplicate __self prop found #198

Comments

matinzd commented May 3, 2024 • edited Loading

Description

Screenshot

Environment

matinzd commented May 3, 2024 • edited Loading

matinzd commented May 3, 2024 • edited Loading

subramanian-elavathur commented May 3, 2024

Description

babel.config.js

metro.config.js

Environment

rocket13011 commented May 3, 2024

Martinocom commented May 6, 2024

matinzd commented May 6, 2024

matinzd commented May 6, 2024 • edited Loading

CoryWritesCode commented May 7, 2024

kmagiera commented May 8, 2024

subramanian-elavathur commented May 8, 2024 • edited Loading

seanpcoyle commented May 8, 2024

phuongnn1996 commented May 24, 2024

matinzd commented May 3, 2024 •

edited

Loading

matinzd commented May 3, 2024 •

edited

Loading

matinzd commented May 3, 2024 •

edited

Loading

matinzd commented May 6, 2024 •

edited

Loading

subramanian-elavathur commented May 8, 2024 •

edited

Loading