I am trying to setup debug environment for react-native on VS Code on Mac.
This is launch.json :
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react",
"target": "simulator"
},
{
"name": "Debug Android",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
On debugging I am getting the error - Debug adapter process has terminated unexpectedly. along with one more error.
I have opened an issue on Github as well but haven't received a solution yet.
Update : In response to ShaneG answer, I am adding screenshots of project scheme and info.plist
Check this: in your .vsCode folder, see if you have a .react folder in there.
If you don't, try running code . from the root directory of your project folder. You will need to install the shell command from VSCode if you haven't already (type shift-command-p and search for Shell command: Install code command PATH).
This was my issue, for whatever reason the .react folder was not being created when I opened VSCode from spotlight.
I see its "Debug ios" you ran. Can you make sure its pointing to the correct info.plist file? Many errors can crop up if its pointing to an old info.plist.
I can see on the GitHub issue you posted, when you ran it from the command line it outputted a very useful error.
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier
build/Build/Products/Debug-iphonesimulator/firstdemo.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist
Its trying to access the bundleIdentifier but it cannot seem to find it. This info should be inside the info.plist file. Your app might be routed to an old info.plist file that does not have this information.
How to check if its pointing to the correct info.plist?
First before we go into the info.plist, in xcode go to Product -> Scheme
-> Edit Scheme. In here go to Run and check what your build config is
set to. The error above is coming from Debug, so if your build config
is set to Release this may be the issue. This may mean Release has the
info.plist and Debug does not have this bundle info because its not
built in it.
In here there is also a "Debug Executable" check box. This may need to
be checked
If none of that works, although it might, maybe check the info.plist inside your project folder in xcode. See if it has a bundle identifier.
I would say the Scheme section is probably the problem so hopefully that helps you!
Delete React Native Tools extension from vs-code and then reinstall it.
It works fine post that.
Related
I am new to React Native and trying to get my first React application to run on Android Emulator. I am getting this error message when running the debugger:
Could not debug. Error while executing command
'c:\Users...\weather4\node_modules.bin\react-native.cmd run-android
--no-packager': Error while executing command 'c:\Users...\weather4\node_modules.bin\react-native.cmd run-android
--no-packager' (error code 101)
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "android"
},
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach"
},
]
}
settings.json
{
"dart.flutterSdkPath": "C:\\src\\flutter",
"react-native.packager.port": 19001
}
Path env variable
C:\Users\...\.vscode\extensions\msjsdiag.vscode-react-native-0.16.0\src\common
I was getting similar errors and found this fix:
Uninstall Flutter (and Dart) extensions from Visual Studio Code.
Close Visual Studio Code, delete the .vscode folder and open Visual Studio Code again.
Configure the "Run and debug" panel again so you can run the app.
I'm trying to launch an Ionic app on my Android device from VS Code, using the vscode-cordova extension.
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run android on device",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "device",
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"ionicLiveReload": true
}
]
}
But I get following error message:
[cordova-tools] Error processing "launch": The Ionic live reload server exited
unexpectedly
The debug console does offer a bit more information:
Launching for android (This may take a while)...
Starting Ionic dev server (live reload: true)
The Ionic live reload server exited unexpectedly
How can I overcome this issue?
Trying to run ionic cordova run android -l revealed the issue:
[ERROR] Multiple network interfaces detected!
You must select an external-facing IP for the dev server that your device or emulator has access to with the --address option.
So adding the --address option to the runArguments of my launch.json as lined out in the readme resolved my issue:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run android on device",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "device",
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"ionicLiveReload": true,
"runArguments": [
"--address 192.168.1.2"
]
}
]
}
Where 192.168.1.2 is the ip address of my dev laptop. Also make sure this ip address is reachable from your device.
I am trying to compile a 'kitchen-sink' demo, for 'react-native':
NativeBase-KitchenSink
, and I have followed the following links already:
Solution to "React native: Android project not found. Maybe run react-native android first?"
Solution to "Expo : Cannot find a module LogReporter"
That is, from the installation of 'npm' till the installation of required tools using 'Yarn'.
And now I am stuck myself:
a. I run the command npm install in the 'root directory' of this project.
b. Then I run expo start, I see that the problems addressed in link 1 and 2 have gone away.
c. Then when the browser is up, I issue expo build:android
The following error shows up:
[11:14:44] Checking if current build exists...
[11:14:48] No currently active or previous builds for this project.
[11:14:50] Publishing to channel 'default'...
[11:14:56] Building iOS bundle
[11:15:09] Building Android bundle
[11:15:20] Analyzing assets
[11:15:27] Uploading assets
[11:15:27] No assets to upload, skipped.
[11:15:27] Processing asset bundle patterns:
[11:15:27] - D:\Projects\ReactNativeProjects\AwesomeProject\**\*
[11:15:27] Cannot read property 'forEach' of undefined
[11:15:27] TypeError: Cannot read property 'forEach' of undefined
at C:\xdl#51.4.0\src\Project.js:903:26
at Generator.next (<anonymous>)
at step (C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:191)
at C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:361
Please help me know where I am wrong? Some posts say the code is correct.
[EDIT]:
I also did a new thing in my 'app.json', just before executing command react-native eject, to create Android and iOS folders:
(Note: It is not mandatory to issue the react-native eject command, as this will cause permanent change according to the documentations)
{
"expo": {
"name": "AwesomeProject",
"description": "A Kitchen Sink project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": [
"ios",
"android"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.abhsax.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splashscreen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
},
"changes": "----below are the changes----",
"name": "AwesomeProject",
"displayName": "AwesomeProject"
}
That is, just when I added:
"name": "AwesomeProject",
"displayName": "AwesomeProject"
at the bottom of my 'app.json'
the command react-native eject started working, which was not working earlier, as the output was:
App name must be defined in the app.json config file to define the
project name. It must not contain any spaces or dashes.
Clearly, it is the hybrid of two different versions of the package managers: 'Expo' and 'npm'.
But the 'forEach' error in the concern here, did not go away.
Further efforts done were useless, so I am not putting them here.
I shall keep on trying until I figure it out.
you have to upgrade the expo cli version
do npm install -g expo-cli
and then expo start again
I resolved this by knowing that I was again mixing up with the package managers: 'npm' and 'yarn', and this time you do not need 'expo' for time being or all-together, so modify your 'app.json', removing expo section.
All I had to do was to issue the following commands in order.
Add React Base
yarn add react-base --save
Install Peer Dependencies
The peer dependencies included from any 'npm' packages does not automatically get installed. Your application will not depend on it explicitly.
react-native link
In the case of this demo project, one dependency was missing:
react-native link react-native-vector-icons
Start Yarn
yarn start
Run on android device or simulator.
react-native run-android
[Note:] Java 8 is recommended to be installed instead of higher versions of Java. see: What to install? Java 8 or Java 10
I wish it helps.
Happy coding :-)
Try changing:
"assetBundlePatterns": ["**/*"] to "assetBundlePatterns": ["assets/*"]
in your app.json file.
Error:
******** Unhandled error in debug adapter: SyntaxError: Unexpected token L in JSON at position 0
at JSON.parse (<anonymous>)
at Pipe.channel.onread (internal/child_process.js:471:28)
Hello Guys,
I had found a lot of other issues/questions like this here and any where else, but no of them includes "Unhandled error in debug adapter". I had tried a lot of workflows, but nothing worked.
Short Introduction:
OS: Windows 64x
IDE: VS Code (version: 1.25.1 / launch.json see below)
vscode-Plugin: React Native Tools (version: 0.6.12)
Language/Framework: React-Native
(React-version: 16.4.1 /RN-version 0.55.4 / cli-version: 2.0.1)
Project: Android App (iOS followed later)
Output of React-Native: Run android
Installing APK 'app-debug.apk' was successful.
Output of React-Native: Starting custom debugger by executing: echo A debugger is not needed: "[project-location]" "[project-location].vscode"
Starting App with react-native run-android via terminal still working.
Try following troubleshooting steps:
comment out all JSON.parse() calls
check all fetch based functions
check older repository revisions
repair vscode
reinstall vscode
update RN to 0.56.0
change mobile device
Existing project is to large to show it here and dosn't exist in a public repo.
launch.json - I'm using "Debug Android"
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react",
},
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Attach to packager",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "attach",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug in Exponent",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "exponent",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
}
I don't know where the problem is located:
project
vscode
node
...
Logcat prints only [INFO] no Warnings and no Errors.
Want to debug project with debug terminal of vscode, because debugging with chrome doesn't work with breakpoints.
I'm very new at working with vscode and RN, please explain possible solutions a little bit more detailed.
Thanks in advance.
Chris
The error is in the vscode-react-native extension. There's already been a pull request made to fix this, but if you're feeling adventurous, go to your vscode extensions folder, open the vscode-react-native folder, go to src/debugger/forkedAppWorker.js and replace the following lines:
const nodeArgs = [`--inspect=${port}`, "--debug-brk", scriptToRunPath];
with
const nodeArgs = [`--inspect=${port}`, "--debug-brk"];
and
this.debuggeeProcess = child_process.spawn("node", nodeArgs, {
stdio: ["pipe", "pipe", "pipe", "ipc"],
})
with
this.debuggeeProcess = child_process.fork(scriptToRunPath, nodeArgs)
For more details see the actual file change log (don't worry about it being .ts vs .js, and don't worry about the other two files being changed).
I face a weird Ionic2 behaviour.
When i deploy my app to a simulator, i can see the .ts file sourceMap in the chrome inspect debugger.
On both case, i use :
ionic run android
On the other side, when i deploy my apk on a real device, the tab "Sources" is completely different with an other groups of directories and, with no reference to my .ts files.
My environment is:
OS X 10.11
Ionic 2 2.0.0-beta.35
cordova 6.3.0
The project has been initially generated by:
ionic start biblio tutorial --v2
ionic.config.json
{
"name": "biblio",
"app_id": "",
"v2": true,
"typescript": true
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"filesGlob": [
"**/*.ts",
"!node_modules/**/*"
],
"exclude": [
"node_modules",
"typings/global",
"typings/global.d.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
Any ideas?
For me the problem was that when you're remote debugging on an android device, Chrome debugger cannot access the source map file on the device. The solution/fix is to include the source map inline. To do this I:
added the below to package.json in the root project directory
"config": {
"ionic_bundler": "webpack",
"ionic_source_map_type": "#inline-source-map"
},
This is to make the webpack to add source maps inline changed tsconfig.js line
"sourceMap": true,
to
"sourceMap": false
This is to disable typescript to create source map file since this is done by webpack.
After this change everything seems to be working fine. Note that this applies to ionic 2 RC_04