Can't fix expo problem.
My package.json:
{"name": "smth", "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": {
"#react-navigation/bottom-tabs": "^6.3.2",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#reduxjs/toolkit": "^1.8.4",
"expo": "~46.0.7",
"expo-app-loading": "~2.1.0",
"expo-linear-gradient": "~11.4.0",
"expo-status-bar": "~1.4.0",
"link": "^1.5.1",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.4",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-svg": "12.3.0",
"react-native-svg-transformer": "^1.0.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.2",
"tailwindcss-react-native": "^1.7.10" }, "devDependencies": {
"#babel/core": "^7.18.6",
"#types/react": "~18.0.0",
"#types/react-native": "~0.69.1",
"#types/react-redux": "^7.1.24",
"tailwindcss": "^3.1.8",
"typescript": "^4.6.3" }, "private": true}
I'm trying to launch my project, but this error keeps popping up, I can't find any information
Screenshot:
Error message
Babel config
I had the same issue. I fixed it by
removing node_modules
removing deps that were causing the issue from package.json (in my case - react-native-svg)
installing those deps NOT through npm install, but through expo install. The difference is that expo may have some compatibility issues with some libraries and expo install gets the version that it's compatible with as opposed to the latest one
hope this helps :)
cheers
Related
I just added react-redux with reduxjs/toolkit on react-native.
I tried in dev mode and its been working fine.
I tried with expo start --no-dev --minify and it crashed.
I decided to publish it and when I launched it, my app instantly crashed.
Why ?
package.json
{
"name": "cusual test",
"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": {
"#react-native-picker/picker": "2.4.2",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.1",
"#reduxjs/toolkit": "^1.8.6",
"#types/axios": "^0.14.0",
"axios": "^1.1.3",
"eas-cli": "^2.5.1",
"expo": "~46.0.16",
"expo-status-bar": "~1.4.0",
"expo-updates": "~0.14.6",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-dotenv": "^3.3.1",
"react-native-picker-select": "^8.0.4",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.4"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~18.0.14",
"#types/react-native": "~0.69.1",
"#types/react-native-vector-icons": "^6.4.12",
"typescript": "~4.3.5"
},
"private": true
}
This line makes my app crahes :
const App = () => {
return (
<Provider store={store}>
<Router />
</Provider>
);
};
If I comment provider's lines, it doesn't crash anymore.
Did I miss anything ?
I'm using SDK 46 and expo 6.0.6.
Thanks for help.
Having the same issue. Looks to be caused by a bug in the Redux code. Have a look at this issue on GitHub:
https://github.com/reduxjs/redux/issues/4443
Describes a crash that happens when code is minified and running in production mode.
I have an error
"Unable to resolve module #unimodules/core from D:\react-native-tutorial\node_modules\expo-gl\build\GLView.js: #unimodules/core could not be found within the project or node_modules"
I searched other questions and it seems that this issue should have been resolved after expo version 43. I am on expo 46 so im not sure how to resolve this problem. my package.json looks like :
{
"name": "react-native-tutorial",
"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": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.2",
"#tensorflow/tfjs": "^4.0.0",
"#tensorflow/tfjs-react-native": "^0.8.0",
"base-64": "^1.0.0",
"expo": "~46.0.13",
"expo-asset": "^8.6.1",
"expo-camera": "~12.3.0",
"expo-image-picker": "~13.3.1",
"expo-status-bar": "~1.4.0",
"firebase": "^9.6.11",
"react": "18.0.0",
"react-native": "0.69.6",
"react-native-gesture-handler": "~2.5.0",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
Maps are rendered empty while using Expo SDK 46, it was working perfectly in previous SDK versions, my Google API Keys are set and all required APIs are enabled. It just shows a blank map with the Google Logo
Here is my package.json
{
"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"
},
"dependencies": {
"#expo-google-fonts/nunito": "^0.2.2",
"#react-navigation/bottom-tabs": "^6.3.2",
"#react-navigation/core": "^6.2.2",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"axios": "^0.27.2",
"expo": "~46.0.7",
"expo-app-loading": "~2.1.0",
"expo-location": "~14.3.0",
"expo-secure-store": "^11.3.0",
"expo-status-bar": "~1.4.0",
"firebase": "8.2.3",
"lottie-react-native": "5.1.3",
"moment": "^2.29.4",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-bouncy-checkbox": "^3.0.2",
"react-native-check-box": "2.1.7",
"react-native-dropdown-picker": "^5.4.2",
"react-native-gesture-handler": "^2.5.0",
"react-native-google-places-autocomplete": "^2.4.1",
"react-native-maps": "^0.31.1",
"react-native-maps-directions": "^1.9.0",
"react-native-modal-datetime-picker": "^13.1.2",
"react-native-safe-area-context": "^4.3.1",
"react-native-svg-transformer": "^1.0.0",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "11.23.0"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
I am also facing the same problem with Expo SDK 46, The maps rendered are blank with only the Google Logo. Migrating back to Expo 44 was the only option which worked for me
package.json
{
"main": "node_modules/expo/AppEntry.js",
"homepage": "<My URL>",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"deploy": "gh-pages -d web-build",
"predeploy": "expo build:web"
},
"dependencies": {
"#react-native-community/masked-view": "0.1.6",
"#react-navigation/bottom-tabs": "^5.2.6",
"#react-navigation/drawer": "^5.8.2",
"#react-navigation/native": "^5.1.5",
"#react-navigation/stack": "^5.2.10",
"axios": "^0.19.2",
"expo": "^37.0.11",
"modal-react-native-web": "^0.2.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-actionsheet": "^2.4.2",
"react-native-dialogbox": "^0.6.10",
"react-native-elements": "^1.2.7",
"react-native-image-view": "^2.1.9",
"react-native-modal": "^11.5.6",
"react-native-reanimated": "~1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "~2.2.0",
"react-native-skeleton-content": "^1.0.13",
"react-native-swipeout": "^2.3.6",
"react-native-tab-view": "^2.14.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "^7.8.6",
"#expo/webpack-config": "^0.12.11",
"babel-preset-expo": "~8.1.0"
},
"private": true
}
Make sure your package lock or yarn lock don't still include references to older versions of react-native-reanimated
for me react-native-skeleton was still referencing to an old reanimated version.
If anyone is still experiencing this problem, especially after installing react-native-skeleton, all you need to do is to run:
yarn add react-native-reanimated#1.9.0
yarn upgrade react-native-reanimated
worked for me
In my case, I have another package that has a dependency with react-native-reanimated with a specific version.
You need to update react-native-reanimated to that version.
Check this comment by jakub-gonet to Animated node with ID 2 already exists #1072:
This is most likely caused by two instances of reanimated running simultaneously.
check the package.lock file, it has two reanimated plugins, so delete the old version
and also delete the node_modules, then give yarn install or npm install and run the app
Delete the react-native-reanimated fileby
yarn remove react-native-reanimated
This solved my problem
After having launched the command npm run eject, I follow those steps:
Bare: I'd like a bare React Native project.
I set the name of the app and the xcode project
The command return this message Ejected successfully!
After that, into the ios generated folder I run the command pod install and the result is Pod installation complete!
After performing this procedure I try to run the application using a ios simulator, but I have this error:
The Expo SDK requires Expo to run. It appears the native Expo modules are unavailable and this code is not running on Expo. Visit https://docs.expo.io to learn more about developing an Expo project.
Note that before executing the npm run eject command the app worked correctly.
This is the package.json before the eject:
{
"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": {
"#apollo/react-hooks": "^3.0.1",
"apollo-boost": "^0.4.4",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link-http": "^1.5.15",
"expo": "^34.0.1",
"expo-font": "^6.0.1",
"graphql-tag": "^2.10.1",
"metro-react-native-babel-preset": "^0.56.0",
"prop-types": "^15.7.2",
"react": "16.8.3",
"react-apollo": "^3.0.1",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-camera": "^3.3.2",
"react-native-camera-kit": "^8.0.1",
"react-native-circle-checkbox": "^0.1.6",
"react-native-elements": "^1.1.0",
"react-native-gesture-handler": "^1.3.0",
"react-native-image-picker": "^1.1.0",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-signature-pad": "^0.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.4",
"react-native-webview": "^5.12.1",
"react-navigation": "^3.12.1",
"tcomb-form-native": "^0.6.20"
},
"devDependencies": {
"babel-preset-expo": "^6.0.0"
},
"private": true
}
After eject the package.json has become:
{
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "^34.0.1",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "0.59.10",
"react-native-gesture-handler": "^1.3.0",
"react-native-reanimated": "~1.1.0",
"react-native-screens": "1.0.0-alpha.22",
"react-native-unimodules": "~0.5.2",
"react-native-web": "^0.11.4",
"#apollo/react-hooks": "^3.0.1",
"apollo-boost": "^0.4.4",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link-http": "^1.5.15",
"expo-font": "^6.0.1",
"graphql-tag": "^2.10.1",
"metro-react-native-babel-preset": "^0.56.0",
"prop-types": "^15.7.2",
"react-apollo": "^3.0.1",
"react-native-camera": "^3.3.2",
"react-native-camera-kit": "^8.0.1",
"react-native-circle-checkbox": "^0.1.6",
"react-native-elements": "^1.1.0",
"react-native-image-picker": "^1.1.0",
"react-native-modal-datetime-picker": "^7.5.0",
"react-native-signature-pad": "^0.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-webview": "^5.12.1",
"react-navigation": "^3.12.1",
"tcomb-form-native": "^0.6.20"
},
"devDependencies": {
"babel-preset-expo": "^6.0.0"
},
"private": true
}
The problem you're having is that you have an AppLoading from "expo" package in the App.js that doesn't have support without que ExpoSDK. You have to erase that and put the fonts in the componentDidMount()