The developers on my team are having trouble running our app on Expo Go, which recently upgraded to SDK 51. I followed the steps here (https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/) and edited our package.json and babel.config.js to accomodate for these changes. However, when running the app on Expo Go, the following errors appear on startup:
Cannot read property 'NativeModule' of undefined "main" has not been registered
Has anyone else encountered similar issues with upgrading to SDK 51?
This is our new package.json:
{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject",
"eas-build-pre-install": "npm i",
"test": "jest"
},
"dependencies": {
"@expo-google-fonts/inter": "^0.2.2",
"@expo-google-fonts/roboto": "^0.2.3",
"@expo/config": "^8.1.1",
"@expo/config-plugins": "~7.2.2",
"@expo/metro-config": "^0.10.0",
"@expo/prebuild-config": "~6.2.4",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-community/cli-platform-android": "^11.3.7",
"@react-native-community/datetimepicker": "7.2.0",
"@react-native-google-signin/google-signin": "^11.0.1",
"@react-native-masked-view/masked-view": "0.2.9",
"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/native": "^6.0.13",
"@react-navigation/stack": "^6.3.0",
"axios": "^0.27.2",
"dotenv": "^16.0.3",
"eas-cli": "^2.1.0",
"eslint": "^8.22.0",
"eslint-config-rallycoding": "^3.2.0",
"expo": "51.0.0",
"expo-app-loading": "~2.1.0",
"expo-application": "~5.3.0",
"expo-auth-session": "~5.0.2",
"expo-constants": "~14.4.2",
"expo-dev-client": "~2.4.13",
"expo-font": "~11.4.0",
"expo-image-picker": "~14.3.2",
"expo-network": "~5.4.0",
"expo-notifications": "~0.20.1",
"expo-random": "~13.2.0",
"expo-splash-screen": "~0.20.5",
"expo-status-bar": "~1.6.0",
"expo-updates": "~0.18.19",
"expo-web-browser": "~12.3.2",
"firebase": "^9.10.0",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.10",
"react-native-color-picker": "^0.6.0",
"react-native-elements": "^3.4.3",
"react-native-gesture-handler": "~2.12.0",
"react-native-gradle-plugin": "^0.71.19",
"react-native-image-crop-picker": "0.38.1",
"react-native-image-picker": "^4.10.0",
"react-native-modal-datetime-picker": "^14.0.0",
"react-native-open-maps": "^0.4.0",
"react-native-popup-menu": "^0.16.1",
"react-native-progress": "^5.0.0",
"react-native-push-notification": "^8.1.1",
"react-native-rapi-ui": "^0.2.1",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native-searchable-dropdown": "^1.1.3",
"react-native-svg": "13.9.0",
"react-native-web": "~0.19.6",
"react-schedule-selector": "^3.0.0",
"styled-components": "^5.3.5",
"yelp-fusion": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.24.5",
"@testing-library/react-native": "^12.4.3",
"jest": "^29.7.0",
"react-native-dotenv": "^3.3.1"
},
"private": true,
"name": "eat-together",
"version": "1.1.0",
"description": "Connecting students through shared meals. Our app allows you to create and join food meetups with ease.",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/eat-together-team/eat-together.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/eat-together-team/eat-together/issues"
},
"homepage": "https://github.com/eat-together-team/eat-together#readme",
"type": "commonjs"
}
And this is our new babel.config.js:
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo", ['module:metro-react-native-babel-preset', { "useTransformReactJSXExperimental": true }]],
plugins: [
[
"module:react-native-dotenv",
{
moduleName: "@env",
path: ".env"
}
],
"react-native-reanimated/plugin"],
};
};
I also tried editing index.js to change registerRootComponent(App); to AppRegistry.registerComponent('main', () => App);, but it didn't change anything.
Thank y'all for commenting! I was able to fix the issue by running npx expo install --fix, then changing my babel.config.js to the following:
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module:react-native-dotenv",
{
moduleName: "@env",
path: ".env"
}
],
"react-native-reanimated/plugin"],
};
};
I.e. I removed the line ['module:metro-react-native-babel-preset', { "useTransformReactJSXExperimental": true }].