Debugging React Native Typescript JSX + Kotlin doesn't hit breakpoints
Hello everyone....
I started a React Native project with IntelliJ IDEA created with:
npx @react-native-community/cli@latest init AwesomeProject
because that react-native-community/cli@latest is the current template to get for a React Native project, and in this way Typescript is actually considered as TSX which is React.JSX.Element based.
So I started to implement some code and I am trying to debug a .tsx typescript of React Native app file to check what's inside a const variable like :
export function MyText() {
const TextToExpose = <Text>I am exposing this text</Text>
debugger;
return TextToExpose;
}
if I put debugger;
in the code and put a breakpoint at that line , then once I run debug Android it stops at the breakpoint and I can check that TextToExpose variable, indeed if I remove that debugger;
code and I put a breakpoint at return TextToExpose;
then it ignores the breakpoint and continues to run the app.... why? Shouldn't that stop even at return to let user check the TextToExpose
variable? Maybe I missed something?....Or maybe I have always to use debugger;
to make it stop when I need to check variables inside typescript?
Or maybe depends from the configuration of my tsconfig.json I report here?{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "React Native",
"compilerOptions": {
"target": "esnext",
"module": "ES2020",
"types": ["react-native", "jest"],
"lib": [
"es2019",
"es2020.bigint",
"es2020.date",
"es2020.number",
"es2020.promise",
"es2020.string",
"es2020.symbol.wellknown",
"es2021.promise",
"es2021.string",
"es2021.weakref",
"es2022.array",
"es2022.object",
"es2022.string"
],
"allowJs": true,
"jsx": "react-native",
"noEmit": true,
"isolatedModules": true,
"strict": true,
"moduleResolution": "bundler",
"customConditions": ["react-native"],
"allowImportingTsExtensions": true,
"allowArbitraryExtensions": true,
"resolveJsonModule": true,
"resolvePackageJsonImports": false,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
// Causes issues with package.json "exports"
"forceConsistentCasingInFileNames": false
},
"exclude": [
"**/Pods/**"
]
}
I have installed Javascript and Typescript plugin and also Javascript Debugger, I am debugging with an android device connected via USB and my project is Kotlin + Typescript for android code as it is expected from the template....
thanks in advance to whoever could help me to reach to debug my code and check variables!!!
请先登录再写评论。
Hello! Could you please share screenshots of your run configurations? Also, it would be helpful if you could provide a video showing the steps you take and the current behavior. You can upload them to https://uploads.services.jetbrains.com/ and let me know the upload ID. Thanks!
Hello Oksana Chumak and everyone,
first, thank you Oksana Chumak for your answer and here I made two videos where you can see also the Configuration settled for my scenario….. here the upload ID: 2024_11_04_wXeDe9rNSuhrxeDngJTgWQ
I made two videos because one is pretty simple without any local modules where , as I said in previous post, the debugger stops the execution on the breakpoint if there's “debugger” line code otherwise it won't stop.
In the second video, as you can see, I added a local native module where the sample templates added just a multiply function and as you can see I put a breakpoint on kotlin function which IntelliJ should support 100% but it didn't even stopped the execution to let me check variables in that function, like that toAdd variable…I tried to add also “debugger” line code because maybe it would make IntelliJ's debugger see it and stop execution but seems “debugger” is not recognized by Kotlin compilation…
And as I said in previous stop, if I am debugging so putting a breakpoint, the debugger should just see that breakpoint and stop the execution there…
Maybe there is something I have to configure somewhere in IntelliJ to make the debugger working properly and stop on any breakpoint there is.
Thanks in advance for your support!
Cheers!
p.s.: if necessary I could zip this sample I made and upload it in the same place and share the upload ID…
p.s.s.: In detail , I need to reach to debug the local native module because in there I'm gonna implement a mobile Wifi check function to obtain IP address so I need to read what the mobile device gives back through the Kotlin's function NetworkInterfaces…
I tried today to change different settings on IntelliJ Settings window about Debugger as you can see in those screenshots:
but seems it doesn't even stop at the AwesomeModule ‘s local library breakpoint I set there…. maybe there's a bug in the debugger or there's some particular command to add in Custom Debug Log Configuration ?…. Or maybe there's some particular instructions to add in the Kotlin code of the local library module to tell the debugger to step on it?
Hello again… I even tried to update build.gradle specifying :
and
due for compatibility with Kotlin 1.9.22 with Java JDK 17 and Gradle 8.7 but the debugger didn't stopped at breakpoint either in the local library module which is implemented in Kotlin…
Any directions / suggestions to make the debugger stop at the breakpoint?
I can provide you this sample compressed in a zip package to investigate about it…
Thanks in advance to all the Jetbrain Support Staff!
Best greetings!
Update: following the Compatibility Matrix here, https://docs.gradle.org/current/userguide/compatibility.html , I tried to install
OpenJDK 21
so see if IntelliJ's debugger would stop at the Kotlin's code breakpoint in the local library module, because maybe withOpenJDK 17
was too old to let Kotlin stop at the breakpoint, so then running command : gradlew -version I obrained:------------------------------------------------------------
Gradle 8.7
------------------------------------------------------------
Build time: 2024-03-22 15:52:46 UTC
Revision: 650af14d7653aa949fce5e886e685efc9cf97c10
Kotlin: 1.9.22
Groovy: 3.0.17
Ant: Apache Ant(TM) version 1.10.13 compiled on January 4 2023
JVM: 21.0.5 (Eclipse Adoptium Temurin-21.0.5+11)
OS: Windows 10 10.0 amd64
but when I tried to compile in IntelliJ , it reported me this:
JDK - Required to compile Java code -
Version found: 21.0.5 -
Version supported: >= 17 <= 20
investigating a bit more I reached to set in all
build.gradle
files those :compileOptions {
sourceCompatibility JavaVersion.VERSION_21
targetCompatibility JavaVersion.VERSION_21
}
kotlinOptions {
jvmTarget = “21”
}
and settled the Java Compiler as :
but on trying to compile it reports me:
> Task :awesome-module:compileDebugKotlin FAILED
* What went wrong:
Execution failed for task ':awesome-module:compileDebugKotlin'.
> Inconsistent JVM-target compatibility detected for tasks 'compileDebugJavaWithJavac' (17) and 'compileDebugKotlin' (21).
I don't understand why it keeps saying (17) when I settled
21
everywhere….even in awesome-module local library's build.gradle too….So , at this point, I ask you all the Support Staff to tell me what to do to make the debugger working in the Kotlin's code or what to check if there could be something settled not properly… As I said earlier I can zip and upload this sample project….
( Actually, I am using trail version of IntelliJ but if I can't reach to debug the whole project then I could consider NO WORTH to buy a license because I don't want to waste money on something that is NOT working properly and the debugger is really important on an IDE… )
Hope you will let me know anything quickly because I have to work on a real project and really need to debug properly what I am implementing…
Thanks in advance to all the Support!
Best greetings!
Npuleio Could you please share the reproducer Project (and the Upload ID), so we can take a closer look at the issue and identify its' root cause?