Horrible experience starting a project

JeanPSF commented 6 months ago

Description

I tried to start a new project, on a clean computer and i gave up.

There is a gradle problem with the latest react native version in the date i am writing this, which the tutorial from the official website does not support and it is impossible to run the project on it, i had to waste 4 hours around the internet searching for how to fix even tho i did not change a single line of code and my enviroment according to react-native doctor was 100% (https://github.com/gradle/gradle/issues/27844#issuecomment-2078200254)

Solution: distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-bin.zip

I cleaned all my vscode configuration, installed all official plugins according to package.json (babel, react-native, eslint, react native esling, typescript, typescript eslint, eslint, prettier)

Added a settings.json and also configured my global and workspace setting according to multiple configurations found around the git issues and the formatting of the files simply do not work.

Whereas the formatting works perfect with reactjs, nextjs, nestjs, flutter, java, typescript and javascript files on any other project besides the react native.

It was a pain just to run the hello world project on the emulator and when it finally runs, i can't code because of configuration files unless i disable all the lints. It is extremelly frustrating (not even going to talk about the java configuration needed which i already knew it was going to be a pain, and honestly, nothing has improved from 2.5 years ago when i last worked with react native detecting the java and jdk configuration).

So, my suggestion is to improve, not sure how, the Enviroment Setup section (https://reactnative.dev/docs/environment-setup) so it helps people understand all the base configuration needed to properly run everything the starting project has to offer. Also, make the project configuration of the starting project a little smarter on the setup, so it warn developers on missing extensions or configuration (flutter does an awesome job on this aspect, just add a flutter project on a brand new computer with vscode, vscode will give you tons of modals to install everything you need).

Some good examples which has never failed me, neither on windows or on macbooks.

https://docs.flutter.dev/get-started/install/windows/mobile https://spring.io/quickstart https://docs.nestjs.com/ https://nextjs.org/docs/getting-started/installation

Steps to reproduce

https://reactnative.dev/docs/environment-setup
React Native CLI
Windows
Android or IOS
Follow all the steps

React Native Version

0.74.0

Affected Platforms

Runtime - Android, Runtime - iOS

Output of `npx react-native info`

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.19045
  CPU: "(16) x64 AMD Ryzen 7 3700X 8-Core Processor             "
  Memory: 14.88 GB / 31.93 GB
Binaries:
  Node:
    version: 20.12.2
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 10.5.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "32"
      - "34"
    Build Tools:
      - 34.0.0
    System Images:
      - android-34 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Disabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: AI-233.14808.21.2331.11709847
  Visual Studio:
    - 17.9.34616.47 (Visual Studio Community 2022)
    - 17.10.34607.79 (Visual Studio Community 2022)
Languages:
  Java: 17.0.5
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.0
    wanted: 0.74.0
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.74.1 is now available (your project is running on v0.74.0).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.74.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=windows".

Stacktrace or Logs

> npx react-native run-android

info Installing the app...

> Configure project :react-native-vision-camera    
[VisionCamera] Thank you for using VisionCamera ?? 
[VisionCamera] If you enjoy using VisionCamera, please consider sponsoring this project: http://github.com/sponsors/mrousavy
[VisionCamera] node_modules found at E:\msc_rn_poc\node_modules
[VisionCamera] VisionCamera_enableFrameProcessors is set to true!
[VisionCamera] react-native-worklets-core not found, Frame Processors are disabled!
[VisionCamera] VisionCamera_enableCodeScanner is set to false!

> Task :app:checkDebugAarMetadata FAILED
12 actionable tasks: 8 executed, 4 up-to-date      

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor  

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform hermes-android-0.74.0-debug.aar (com.facebook.react:hermes-android:0.74.0) to match attributes {artifactType=android-aar-metadata, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-runtime}.
      > Execution failed for JetifyTransform: C:\Users\User\.gradle\caches\modules-2\files-2.1\com.facebook.react\hermes-android\0.74.0\d60b409dd038152531d9601cb213ef5faa2ddc58\hermes-android-0.74.0-debug.aar.
         > Java heap space

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.        

BUILD FAILED in 42s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: Execution failed 
for task ':app:checkDebugAarMetadata'. > Could not 
resolve all files for configuration ':app:debugRuntimeClasspath'. > Failed to transform hermes-android-0.74.0-debug.aar (com.facebook.react:hermes-android:0.74.0) to match attributes {artifactType=android-aar-metadata, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-runtime}. > Execution failed for JetifyTransform: C:\Users\User\.gradle\caches\modules-2\files-2.1\com.facebook.react\hermes-android\0.74.0\d60b409dd038152531d9601cb213ef5faa2ddc58\hermes-android-0.74.0-debug.aar. > Java heap space * Try: 
> Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 42s.
info Run CLI with --verbose flag for more details.

Reproducer

https://github.com/facebook/react-native

Screenshots and Videos

No response

github-actions[bot] commented 6 months ago

:warning:	Newer Version of React Native is Available!
:information_source:	You are on a supported minor version, but it looks like there's a newer patch available - 0.74.1. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.1. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

github-actions[bot] commented 6 months ago

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

cortinico commented 6 months ago

This has already been discussed a number of times: https://github.com/facebook/react-native/issues/36685#issuecomment-1492034118 https://github.com/facebook/react-native/issues/41310#issuecomment-1822624846

Solution: You need to increase the amount of memory that Gradle can use.

Also have you considered using Expo instead?

mrkesu commented 6 months ago

Changing to distributionUrl=https://services.gradle.org/distributions/gradle-8.5-bin.zip worked. Changing memory settings as suggested did absolutely nothing for me.

Cheers mate, I was about to tear my hair out.

This was actually a more frustrating start than setting up a flutter dev environment on Arch. Impressive.

JeanPSF commented 6 months ago

Gradle memory was not the problem. Which means this was not discussed a number of times, but since it is closed, there is no point in keep discussing.

I am glad i was able to help you @mrkesu

This has already been discussed a number of times: #36685 (comment) #41310 (comment)

Solution: You need to increase the amount of memory that Gradle can use.

Also have you considered using Expo instead?

dkrish commented 6 months ago

Changing to distributionUrl=https://services.gradle.org/distributions/gradle-8.5-bin.zip worked. Changing memory settings as suggested did absolutely nothing for me.

Cheers mate, I was about to tear my hair out.

This was actually a more frustrating start than setting up a flutter dev environment on Arch. Impressive.

worked for me too, thanks!

colbymaloy commented 2 weeks ago

chiming in, this stupid shit is why im done with development. Trying to get my flutter project to build on android, ended up here. what works for someone else doesnt work for me, etc. stupid shit, makes me want to kms

facebook / react-native