react-native plugin run-android fail with default install (metro/babel)

[rhys-e]

When using the instructions with android the app is installed on the device but metro ultimately fails at some point with the default App.tsx that comes with the plugin.

Current Behavior

Metro fails to bundle the js/ts with the default nrwl react-native app

Expected Behavior

App should load as expected

Steps to Reproduce

npx create-nx-workspace happynrwl \
--preset=react-native \
--appName=mobile

nx run-android mobile

Failure Logs

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.

(Neither of the above plugins seem to be in use)

Environment

• node 16
• npm 8
• MacOS M1
• Android Nexus 10

[malord]

Can confirm. Same resulting trying to make an iOS build on an Intel Mac (node 16, npm 8, @nrwl/react-native 14.7.3).

[AfanasievN]

Same behavior

[curthipster]

I'm having the same issue on both Android and iOS. The most recent commit includes changes to babel, in case that's a helpful clue to anyone?

CI also failed in that PR. @FrozenPandaz is this something you can help with?

Edit: I tried a version prior to the above commit and it had the same error. I was able to find a way to make it work, though I am quite certain this is a bandaid for the underlying issue. I found this setting by looking through the source code of metro-react-native-babel-preset.

Modify apps/<your name>/babel.config.json:

{
  "presets": [
    [
      "module:metro-react-native-babel-preset",
      { "useTransformReactJSXExperimental": true }
    ]
  ]
}

[saidybarry]

Can y'all help out with this issue.

[curthipster]

Although my workaround above allows the app to work, it causes an issue with nx test, also babel related:

 FAIL   mobile  apps/mobile/src/app/App.spec.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/chrispruett/dev/jam-mono/apps/mobile/src/app/App.spec.tsx:10
      var _render = (0, _reactNative.render)(<_App.default />),
                                             ^

    SyntaxError: Unexpected token '<'

I'm gonna keep digging on this, and if anyone can offer advice/help, I'd appreciate it.

[curthipster]

I've got the app running with hot reload and nx test working with the following change.

Add the plugins section to apps/<your name>/babel.config.json:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

[3imed-jaberi]

I've got the app running with hot reload and nx test working with the following change.

Add the plugins section to apps/<your name>/babel.config.json:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

I confirm that the @babel/plugin-transform-react-jsx plugin solve the problem

[mtzfactory]

I've got the app running with hot reload and nx test working with the following change.

Add the plugins section to apps/<your name>/babel.config.json:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

I can confirm too that @curthipster solution works. Test working properly as well.

[curthipster]

Even better, @xiongemi's fix in 14.7.6 seems to work without my patch above. Thank you @xiongemi.

[wouterh-dev]

We're getting this issue with 15.0.12

[curthipster]

@wouterh-dev I haven't had this issue since 14.7.6. I'm on 15.0.10 right now.

Generally the key is to make sure that you are using the exact right packages expected by React Native. If I upgrade any of the metro packages to versions beyond what RN is asking for, I've run into issues. I've quit allowing Dependabot to auto-upgrade them and instead use https://react-native-community.github.io/upgrade-helper each time a new version of RN is released.

Hope that helps.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.