Debugging Expo web in vscode - react-native

I am trying to debug a React Native code running on Expo web locally using vscode.
I tried these configurations in launch.json:
{
"command": "npm start",
"name": "Run npm start",
"request": "launch",
"type": "node-terminal"
},
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach",
"port": "19001",
}
and in both cases Expo runs and the debugger attaches:
Debugger listening on ws://127.0.0.1:64192/13e8c77d-9c88-4909-9762-9b5bf8b70f90
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached
But the breakpoints are either unbounded or not working.
This is the scripts in package.json:
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
Any idea on what I'm missing?

Related

yarn android not working with react native

i´m running my react native app with bare workflow, and when i try to execute it with yarn android i get this error:
Could not read script 'C:\Users\claud\OneDrive\├?rea de Trabalho\teste\node_modules\expo\scripts\autolinking.gradle' as it does not exist.
package.json
{
"name": "teste",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~47.0.9",
"expo-splash-screen": "~0.17.5",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
In my case it was because of yarn's new policy, "PnP"!
There's a perfect workaround here

how to run build of my expo react native code

I created a React Native project by expo. Today I found there was a legacy compiling issue, so I deleted node_modules folder and tried to rebuild it. But when I ran: npm run build, it said: Missing script: "build". I also tried npm build or expo build, neither worked.
My package.json as following:
{
"name": "techpop",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "^13.0.0",
......
}
}
Mustafa answered my question in comments, the command npm install works!
If you want to create a build for android
expo build:android
If you want to create a build for ios
expo build:ios

Getting Error: "React Native is not installed"

enter image description here
When I'm going to execute the command expo start, give me the following error, I'm starting to work with react native and I don't manage much, what can it be?
app.json
{
"expo": {
"name": "Project",
"slug": "Project",
"version": "1.0.0",
"orientation": "portrait",
"sdkVersion": "35.0.0",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "^35.0.0",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"expo-status-bar": "^1.0.2",
"react-dom": "~16.11.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
new error
enter image description here
folders
I changed the files in the folder
\node_modules\metro-config\src\defaults\blacklist.js
in
var sharedBlacklist = [
/node_modules[/\\]react[/\\]dist[/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
for
var sharedBlacklist = [
/node_modules[\/\\]react[\/\\]dist[\/\\].*/,
/website\/node_modules\/.*/,
/heapCapture\/bundle\.js/,
/.*\/__tests__\/.*/
];
now this error is showing up
this last error was solved by installing the expo directly on the emulator.
As it is shown in the error, React Native is not installed. So,
(1) npm install
(2) npm start
That's it. If you still get any problem, please update your question by containing your app.json file content.
UPDATE:
I think the problem is with your sdk version. Please try changing the version of the sdk version.
(1) replace your package.json with the following content. (Copy and Paste)
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~37.0.3",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Above, I've changed the sdk version from 38 to 37.
(2) Delete node_module, and .expo folders if they have been created in your project root directory.
(3) npm install
(4) npm start
That's it. It should work now!
try changing the source of react-native in your package.json by changing this line:
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
for this
"react-native": "^0.63.0",

Expo SDK v(null) - Expo Client requires v35.0.0

I see a comment here, but I don't want to install expo-cli globally. I want my project's packages to be dictated by the package.json. This way when it's shared, nobody needs to do any other extra configuration. My package.json is:
{
"name": "my-new-project",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"upgrade": "expo upgrade",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/samples": "2.1.1",
"expo": "^31.0.2",
"expo-cli": "^3.22.3",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^2.18.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
}
}
Here is my app.json
{
"expo": {
"name": "stuff",
"description": "A very interesting project.",
"slug": "stuff",
"privacy": "public",
"sdkVersion": "31.0.0",
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
Ok after spending countless hours on this, it's fixed. I basically just did what was asked and changed expo to 35.0.0 and have react-native point to sdk-35.0.0.tar.gz. Changed the version to 35.0.0 in app.json as well
try with this one
expo upgrade
or you can find your version documentation from
https://docs.expo.io/workflow/upgrading-expo-sdk-walkthrough/
in individual page has instruction
https://blog.expo.io/expo-sdk-38-is-now-available-ab6cd30ca2ee
Below 37.0.0 support
expo update 35.0.0
this code

React Native Version Mismatch Error

I am trying to run a react native application using the following command.
npm run android
I get the following error.
im using nvm - nvm use stable
Now using node v8.9.4 (npm v4.6.1)
**package.json**
{
"name": "client",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.11.0",
"jest-expo": "23.0.0",
"react-test-renderer": "16.0.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^23.0.4",
"react": "16.0.0",
"react-native": "0.50.3"
}
}
A different solution recommended rerunning the build process because there maybe some interference, but this did not work for me.
I managed to solve this my self. The error message was showing a react-native version of 0.50.3.
But the latest version is 0.52 as can be seen here https://facebook.github.io/react-native/versions.html.
So i updated package json to reflect this.
"dependencies": {
"react-native": "0.52"
}
then i deleted npm modules and reran npm install. This fixed my issue.
tldr; update package.json react-native dependency to reflect latest version.
I Had the same problem, and the KHAN give us the right solution.
I'm Putting here the package.json for thoses who need the fix:
{
"name": "project",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.11.0",
"jest-expo": "25.0.0",
"react-test-renderer": "16.0.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^25.0.0",
"react": "16.0.0",
"react-native": "0.52"
}
}