[expo@52.0.0-preview.23] App entry not found

ivan-moego commented 2 weeks ago

Minimal reproducible example

https://github.com/ivan-moego/expo-52-test

What platform(s) does this occur on?

iOS

Where did you reproduce the issue?

in a development build

Summary

Environment

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.20.4 - /opt/homebrew/opt/node@18/bin/node
      Yarn: 1.22.22 - /opt/homebrew/opt/node@18/bin/yarn
      npm: 10.7.0 - /opt/homebrew/opt/node@18/bin/npm
      Watchman: 2024.10.28.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.15.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.5, iOS 17.5, macOS 14.5, tvOS 17.5, visionOS 1.2, watchOS 10.5
    IDEs:
      Android Studio: 2024.1 AI-241.18034.62.2412.12266719
      Xcode: 15.4/15F31d - /usr/bin/xcodebuild

Expo Doctor Diagnostics

Detailed check results:

Multiple lock files detected (pnpm-lock.yaml, package-lock.json). This may result in unexpected behavior in CI environments, such as EAS Build, which infer the package manager from the lock file.

The following issues were found when validating your dependencies against React Native Directory:
No metadata available: @babel/runtime
Advice:
- Update React Native Directory to include metadata for unknown packages. Alternatively, set expo.doctor.reactNativeDirectoryCheck.listUnknownPackages in package.json to false to skip warnings about packages with no metadata, if the warning is not relevant.

One or more checks failed, indicating possible issues with the project.

brentvatne commented 2 weeks ago

your project has a package-lock.json and pnpm-lock.yml. try deleting both, nuking node_modules, and then only running pnpm i. as doctor says, this could cause issues if you use multiple pkgs managers in one project

ivan-moego commented 2 weeks ago

After deleting package-lock.json and pngpm-lock.yml according to the scheme you mentioned, the problem still exists.

Detailed check results:

The following issues were found when validating your dependencies against React Native Directory: No metadata available: @babel/runtime Advice:

Update React Native Directory to include metadata for unknown packages. Alternatively, set expo.doctor.reactNativeDirectoryCheck.listUnknownPackages in package.json to false to skip warnings about packages with no metadata, if the warning is not relevant.

One or more checks failed, indicating possible issues with the project.

brentvatne commented 2 weeks ago

how did you create the repro? i've created a project with pnpm create expo-app example --template default@sdk-52 and it worked

brentvatne commented 2 weeks ago

ah, your metro config. delete it, and it will work.

brentvatne commented 2 weeks ago

https://docs.expo.dev/guides/monorepos/#modify-the-metro-config

Expo's Metro config has monorepo support for bun, npm, yarn, and pnpm. You don't have to manually configure Metro when using monorepos if you use the config from expo/metro-config. If that's the case, you can skip this step.

cc @byCedric - maybe it's a bit confusing that we show immediately after this text how people can configure it manually. if you just skim it, you might think you need to copy that in

ivan-moego commented 2 weeks ago

Did you use my demo to test? The problem still existed after I deleted metro.config locally. Because I changed the main entry of package.json

ivan-moego commented 2 weeks ago

@brentvatne I changed package.json to "main": "expo-router/entry "and it worked。 But when I use "main": "index.js "again, the problem arises

brentvatne commented 2 weeks ago

@ivan-moego - the index.js won't work there because you're not using the correct import for expo-router. use import "expo-router/entry" in your index.js, like this https://github.com/brentvatne/microfoam-app/blob/458ca80ff3ce29ffcfe1d9f336611e1284155afe/apps/mobile/index.js#L8-L9

brentvatne commented 2 weeks ago

created a task internally for this:

ivan-moego commented 2 weeks ago

@brentvatne Excuse me, the page is white after adding the router.

index.js:

import 'react-native-gesture-handler';
import '@expo/metro-runtime';

// Register app entry through Expo Router
import "expo-router/entry";

import { registerRootComponent } from 'expo';

import { App } from './src/entry/App1';

registerRootComponent(App);

App1.js

function App() {
    return (<div> hello world </div>);
}
exports.App = App;

› Logs for your project will appear below. Press Ctrl+C to exit. iOS Bundled 556ms index.js (1313 modules) (NOBRIDGE) LOG Bridgeless mode is enabled INFO 💡 JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge). iOS Bundled 61ms index.js (1 module) (NOBRIDGE) LOG Bridgeless mode is enabled INFO 💡 JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge).

result image:

brentvatne commented 2 weeks ago

function App() {
    return (<div> hello world </div>);
}
exports.App = App;

there are a number of problems with this :) starting with - this is react-native, you should be using View and Text imported from react-native, not div.

it's really unclear what you are trying to accomplish here with your App1.js file. sorry i can't help you unless you explain clearly what you are trying to do

ivan-moego commented 2 weeks ago

@brentvatne Thank you for your patience，this is a demo. In our project, The code for app.tsx looks like this：

ivan-moego commented 2 weeks ago

@brentvatne My problem is that after upgrading to expo52 preview, when executing npx expo run:ios locally, there is no error on the console, but the iOS simulator is white screen after opening, which is the same for both my project and demo. Thank you！

brentvatne commented 2 weeks ago

@ivan-moego - got it. previously, this would have resulted in "Invariant Violation: "main" has not been registered." - which is not a particularly meaningful error. i would have expected more info in the logs here, i agree. i also noticed that i can't open react native devtools in this circumstance.

cc @Kudo / @byCedric

nickcherry commented 2 weeks ago

I was having the same experience as @ivan-moego. I'm not sure if our use cases are the same, but I am trying to avoid using Expo's file router, instead opting to imperatively define navigators. The changes that seem relevant to eventually getting a simple View to appear were:

In package.json, setting "main": "index.js"

In index.js:


import { registerRootComponent } from 'expo';

import App from './App';

// registerRootComponent calls AppRegistry.registerComponent('main', () => App); // It also ensures that whether you load the app in Expo Go or in a native build, // the environment is set up appropriately registerRootComponent(App);

- Then in `App.tsx`:
```typescript
import { FC } from 'react';
import { View } from 'react-native';

const App: FC = () => {
  return <View style={{ flex: 1, backgroundColor: 'green' }} />;
};

export default App;

I can't recall how I stumbled onto the file in the first place (maybe it's the default if no main is specified?), but it appears that expo/AppEntry.js hard-codes a path of ../../App. If you are running your app in a monorepo, I wouldn't be surprised if this leads to problems. Explicitly defining a main script in package.json makes this irrelevant as far as I can tell.

I'm not trying to bring in the actual logic of the app (rather than an empty view) and running into a Cannot read property 'useMemo' of null, which suggests to me that maybe React/React Native/Expo are not in sync with regard to the React version, but I'm using the same versions that are defined in the bunx create-expo-app --template blank@sdk-52 template:

"expo": "~52.0.0-preview.23",
"react": "18.3.1",
"react-native": "0.76.1"

brentvatne commented 2 weeks ago

@nickcherry - if you'd like to create a project without expo-router, you can run npx create-expo-app --template blank@sdk-52

evelant commented 1 week ago

@ivan-moego did you figure out where your problem was? I just updated to expo52 + new arch and am having the same issue -- ios only displays a white screen. My app is running but no UI gets displayed. I'm having a tough time tracking it down. Android works fine.

brentvatne commented 1 week ago

@evelant - do you see any errors in your cli logs?

evelant commented 1 week ago

@brentvatne No. That's why it's proving so difficult to track down. Everything works fine on Android, but on iOS it's just a blank white screen no matter what I try to render as my root _layout component with no errors or warnings logged. My components are running, I can even see them in the components tab of the new devtools. It appears to be rendering nothing despite running my components. Very strange!

Relevant section of package.json (it's a bun monorepo, passes expo-doctor version checks)

    "dependencies": {
        "@effect-rx/rx-react": "0.31.5",
        "@expo-google-fonts/aldrich": "0.2.3",
        "@expo-google-fonts/boogaloo": "0.2.3",
        "@expo/fingerprint": "~0.11.2",
        "@expo/html-elements": "~0.11.0",
        "@expo/metro-runtime": "~4.0.0",
        "@expo/vector-icons": "~14.0.4",
        "@fortawesome/fontawesome-svg-core": "6.7.0",
        "@fortawesome/free-brands-svg-icons": "6.7.0",
        "@fortawesome/free-regular-svg-icons": "6.7.0",
        "@fortawesome/free-solid-svg-icons": "6.7.0",
        "@fortawesome/pro-duotone-svg-icons": "6.7.0",
        "@fortawesome/pro-light-svg-icons": "6.7.0",
        "@fortawesome/pro-regular-svg-icons": "6.7.0",
        "@fortawesome/pro-solid-svg-icons": "6.7.0",
        "@fortawesome/react-native-fontawesome": "0.3.2",
        "@gorhom/portal": "1.0.14",
        "@invertase/react-native-apple-authentication": "~2.4.0",
        "@legendapp/motion": "~2.4.0",
        "@notifee/react-native": "9.1.2",
        "@react-native-community/datetimepicker": "~8.2.0",
        "@react-native-community/hooks": "~3.0.0",
        "@react-native-firebase/app": "~21.5.0",
        "@react-native-firebase/messaging": "21.5.0",
        "@react-native-picker/picker": "2.9.0",
        "@react-native/codegen": "0.76.2",
        "@rive-app/react-canvas": "~4.16.4",
        "@sentry/react-native": "~6.2.0",
        "@shopify/flash-list": "1.7.2",
        "@shopify/react-native-skia": "1.5.0",
        "@supabase/supabase-js": "2.46.1",
        "core-js": "3.39.0",
        "date-fns": "4.1.0",
        "expo": "~52.0.7",
        "expo-application": "~6.0.1",
        "expo-asset": "~11.0.1",
        "expo-auth-session": "~6.0.0",
        "expo-av": "15.0.1",
        "expo-clipboard": "~7.0.0",
        "expo-constants": "~17.0.3",
        "expo-crypto": "~14.0.1",
        "expo-device": "~7.0.1",
        "expo-file-system": "~18.0.3",
        "expo-font": "~13.0.1",
        "expo-image": "~2.0.0",
        "expo-keep-awake": "~14.0.1",
        "expo-linking": "~7.0.2",
        "expo-navigation-bar": "~4.0.3",
        "expo-router": "~4.0.6",
        "expo-sharing": "~13.0.0",
        "expo-splash-screen": "~0.29.11",
        "expo-status-bar": "~2.0.0",
        "expo-system-ui": "~4.0.3",
        "expo-tracking-transparency": "~5.0.0",
        "expo-updates": "0.26.7",
        "its-fine": "1.2.5",
        "kysely": "^0.27.4",
        "lodash": "4.17.21",
        "mobx": "6.13.5",
        "mobx-react": "9.1.1",
        "mobx-utils": "6.1.0",
        "react": "18.3.1",
        "react-dom": "18.3.1",
        "react-native": "0.76.2",
        "react-native-animatable": "1.4.0",
        "react-native-appsflyer": "~6.15.1",
        "react-native-autolink": "4.2.0",
        "react-native-device-info": "14.0.0",
        "react-native-gesture-handler": "~2.20.2",
        "react-native-get-random-values": "^1.11.0",
        "react-native-gleapsdk": "14.0.4",
        "react-native-google-mobile-ads": "~14.4.0",
        "react-native-mmkv": "3.1.0",
        "react-native-popover-view": "5.1.9",
        "react-native-purchases": "~8.2.7",
        "react-native-reanimated": "3.16.1",
        "react-native-release-profiler": "^0.2.1",
        "react-native-restart": "0.0.27",
        "react-native-safe-area-context": "4.12.0",
        "react-native-screens": "~4.2.0",
        "react-native-social-buttons": "1.4.2",
        "react-native-svg": "15.8.0",
        "react-native-web": "~0.19.13",
        "rive-react-native": "8.1.0",
        "safe-stable-stringify": "2.5.0",
        "seedrandom": "3.0.5",
        "setimmediate": "~1.0.5",
        "sp-react-native-in-app-updates": "1.4.0",
        "taskhero-app-env": "workspace:latest",
        "taskhero-env": "workspace:latest",
        "taskhero-models": "workspace:latest",
        "taskhero-shared": "workspace:latest",
        "tinycolor2": "1.6.0",
        "uuid": "~11.0.3"
    },
    "devDependencies": {
        "@babel/core": "~7.26.0",
        "@babel/plugin-proposal-class-properties": "~7.18.6",
        "@babel/plugin-proposal-decorators": "~7.25.9",
        "@babel/plugin-syntax-bigint": "7.8.3",
        "@expo/cli": "~0.21.5",
        "@expo/config-plugins": "~9.0.9",
        "@react-native-community/cli": "~15.1.2",
        "@react-native/metro-config": "0.76.2",
        "@sentry/cli": "2.38.2",
        "@types/jest": "29.5.14",
        "@types/lodash": "4.17.13",
        "@types/react": "~18.3.12",
        "@types/react-dom": "~18.3.1",
        "@types/react-test-renderer": "~18.3.0",
        "@types/seedrandom": "3.0.8",
        "@types/tinycolor2": "1.4.6",
        "babel-plugin-transform-react-remove-prop-types": "~0.4.24",
        "babel-preset-expo": "~12.0.1",
        "expo-build-properties": "~0.13.1",
        "identity-obj-proxy": "~3.0.0",
        "jest": "~29.7.0",
        "jest-expo": "~52.0.2",
        "jscodeshift": "17.1.1",
        "prettier": "~3.3.3",
        "react-native-web": "~0.19.13",
        "react-test-renderer": "18.3.1",
        "reactotron-react-native": "~5.1.10"
    },
    "exports": {
        "./*": {
            "types": "./src/*",
            "default": "./src/*"
        },
        "./package.json": "./package.json"
    },
    "main": "index.js",
    "types": "./src/*",

and my index.js

// `@expo/metro-runtime` MUST be the first import to ensure Fast Refresh works
// on web.
import "@expo/metro-runtime"
import "react-native-get-random-values"
import { App } from "expo-router/build/qualified-entry"
import { renderRootComponent } from "expo-router/build/renderRootComponent"
import { enableFreeze } from "react-native-screens"
// import { startProfiling } from "react-native-release-profiler"

// startProfiling()
require("./textdecoder")
require("core-js/actual/object/has-own")
require("core-js/actual/atob")
require("core-js/actual/btoa")
require("./src/index")

enableFreeze(false)

renderRootComponent(App)

My routes live in src/app. Again, it is actually running my components, I can see logs printed from them, but still a blank white screen on iOS. This same code works perfectly fine on android. The issue arose after updating to sdk52 and enabling the new arch. I'm going to test a build with new arch disabled to see what happens.

edit: iirc I was able to run the new arch on sdk51 on ios without issue so it seems to be something that changed with sdk52

ivan-moego commented 1 week ago

@ivan-moego did you figure out where your problem was? I just updated to expo52 + new arch and am having the same issue -- ios only displays a white screen. My app is running but no UI gets displayed. I'm having a tough time tracking it down. Android works fine.

@evelant Since there was no error log, I commented the code. Finally, I found that an abandoned api could not be found after the sentry upgrade, resulting in the failure of the bundle construction. You can also try checking by commenting the code，good luck.

evelant commented 1 week ago

I figured it out as well, it was something different for me. In my case it was rive-react-native, versions > 7.2.0 for some reason seem to break all rendering. I'm following up with them. Unfortunately it seems the new architecture still needs some time to work out the kinks, at least for my use case, lots of glitches with images, layout, animations, and on android lots of random crashes.

expo / expo