So, I deleted and reinstalled everything possible for React Native. I began to get an error for expo. In the terminal a reoccurring error was .json is missing. I don’t know how to fix this. I’m new to React and using a Mac. I was in the middle of a tutorial when it all stopped working. Thank you in advance!
Please create package.json file in your project root folder and past below code and update according to your requirement like project name or description:
{
"name": "expo-template-tabs",
"description": "The Tab Navigation project template includes several example screens.",
"version": "0.0.2",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"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.5",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^3.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
}
}
Then run below command:
- npm install
I hope it would help you out.
Related
so basically the app runs fine on android/iOS but doesn't run on web
These are the following persistent errors
I apparently have figured it has something to do with Webpack(v5?) and react-scripts,
have already downgraded Webpack and added the react-error-overlay but still these errors pop-up
This is my App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View,Platform } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hi! Welcome</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'column',
alignSelf:'stretch',
alignItems:'center',
...Platform.select({android:{backgroundColor:'orchid'}})
},
});
This is my package.json
{
"name": "bigapp",
"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",
"preinstall": "npx npm-force-resolutions",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.5",
"react-scripts": "^4.0.3",
"webpack": "^4.46.0",
},
"devDependencies": {
"#babel/core": "^7.12.9",
"react-error-overlay": "^6.0.9"
},
"private": true
}
Any help is appreciated
So after 18+ hours trying fixes and encountering the same errors...
I have done the following
1)Removed the project and re-installed it using yarn
2)downgraded react to 17.0.2
3)downgraded react-native to 0.68.2
4)downgraded expo to 45.0.0
5)Added the react-error-overlay to 6.0.9 in package.json
This is my package.json
{
"name": "bigApp",
"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"
},
"dependencies": {
"expo": "^45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-native": "0.68.2",
"react-scripts": "5.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"react-error-overlay": "6.0.9"
},
"resolutions": {
"react-error-overlay": "6.0.9"
},
"private": true
}
Still I have no idea how webpack(v5) is fine with outdated dependencies but nonetheless it works.
This might be useful to someone facing similar issues...
Other solutions are welcome.
I am trying to install a react native application using expo. I have tried all the updating packages and more from previous answers without any success.
It is however failing and giving me this error on the web interface: An unexpected error has occurred.
And on the console, it shows me this error message:
ReferenceError: process is not defined
at Module.RNiq (index-1b0e10d3020a016605d2.js:1:237007)
at l (webpack-e067438c4cf4ef2ef178.js:1:563)
at index-1b0e10d3020a016605d2.js:1:457536
at main-41e61ebd24edb78847da.js:1:19485
at main-41e61ebd24edb78847da.js:1:19653
ue # main-41e61ebd24edb78847da.js:1
My package.json is
{
"name": "my-app",
"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": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-web": "0.17.7"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
error image
I was using expo-cli version 5.4.10 but on rolling back to expo-cli version 5.4.9 it worked. Find the various npm expo versions here
I'm a beginner in react, I learned using a (french) tutorial for learning react native. I have a new library in my project and I added react-navigation, i don't know why i have this error when I check my device.
"Unable to resolve module 'react-navigation-stack' from 'Navigation/Navigation.js' (my files) react-navigation-stack could not be found within the project.
Here is the link to the french tutorial: https://openclassrooms.com/fr/courses/4902061-developpez-une-application-mobile-react-native/5046301-concevez-une-navigation-entre-vos-vues
Thanks you so much if you can help me. I don't understand why it does not work
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": "~38.0.8",
"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-38.0.2.tar.gz",
"react-native-web": "~0.11.7",
"react-navigation": "^4.4.0"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Your guide is using React Navigation 4, and it has a link to React Navigation page which has been updated to use version 5.
So you are probably missing some dependencies here, but since you are learning, it would be best to move to the new version and follow the Getting started guide to install new version and all dependencies, and then use:
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
You also have a code example there: Hello React Navigation
Problem:
I have created a react native application there I am using the react-navigation-tab module. But It causing an error which says this.
Unable to resolve "react-native-reanimated" from "node_modules\react-navigation-tabs\lib\module\views\MaterialTopTabBar.js
This is my package.json file.
{
"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",
"expo-linear-gradient": "^7.0.0",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "0.59.8",
"react-native-elements": "^1.2.1",
"react-native-gesture-handler": "~1.3.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.0.8",
"react-navigation-stack": "^1.9.0",
"react-navigation-tabs": "^2.5.5"
},
"devDependencies": {
"babel-preset-expo": "^7.0.0"
},
"private": true
}
I tried lot to find a solution to this problem on the internet but I was unable to do so. Can someone help me to solve this issue? Thank you.
You need to in add "react-native-reanimated" library also as described in react navigation site
Try this
yarn add react-native-reanimated
# or with npm
cd ios
pod install
I'm trying to implement react-navigation into an app made using create-react-native-app. The problem is after installing the npm module (or any other) nothing works. I get build error like undefined is not an object (evaluating 'ReactPropTypes.string').
Googled and followed issues on github and still haven't found a solution. Could some one help me out please?
package.json
{
"name": "TestApp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "~1.0.1",
"react-native-scripts": "0.0.31",
"react-test-renderer": "16.0.0-alpha.6"
},
"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": "^17.0.0",
"react": "^16.0.0-alpha.6",
"react-native": "^0.45.0",
"react-navigation": "^1.0.0-beta.11"
}
}
yarn v0.24.5
npm v3.10.10
Mac OSX Sierra 10.12.5
It looks like a version mis-match between react and react-native. Installing react-native#"0.45.1" with react#"16.0.0-alpha.12" fixed this for me.