[SDK 45] Expo Dev Client doesn't connect to dev server

[kayode0x]

Summary

After upgrading to SDK 45 and building a new dev client, my app runs on its own (standalone) and doesn’t connect to the development server (expo start --dev-client).

On opening the dev client, it gets stuck on the splash screen for about 10 seconds before displaying anything.

The app doesn’t crash or anything, but I’m unable to make live updates which were possible in SDK45.

Managed or bare workflow? If you have made manual changes inside of the ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

iOS

Package versions

{
     "expo": "45.0.0",
     "expo-dev-client": "1.0.0",
     "react-native": "0.68.2",
}

Environment

expo-env-info 1.0.3 environment info:
    System:
      OS: macOS 12.4
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
      Yarn: 1.22.17 - /usr/local/bin/yarn
      npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
      Watchman: 2021.09.13.00 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.11.2 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
      Android SDK:
        API Levels: 28, 29, 30, 31
        Build Tools: 28.0.3, 29.0.2, 30.0.1, 30.0.2, 30.0.3, 31.0.0
        System Images: android-27 | Google Play Intel x86 Atom, android-31 | Google APIs ARM 64 v8a
    IDEs:
      Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
    npmPackages:
      expo: 45.0.0 => 45.0.0 
      react: 17.0.2 => 17.0.2 
      react-dom: 17.0.2 => 17.0.2 
      react-native: 0.68.2 => 0.68.2 
      react-native-web: 0.17.7 => 0.17.7 
    npmGlobalPackages:
      eas-cli: 0.54.1
      expo-cli: 5.4.11
    Expo Workflow: managed

Reproducible demo

import 'expo-dev-client';
import React, { useCallback, useState } from 'react';
import * as SplashScreen from 'expo-splash-screen';
import { View } from "react-native";

const App = () => {
    const [appReady, setAppReady] = useState(false);

    const handleStart = async () => {
        // things to run when app launches.

        setAppReady(true);
    };

    const showSplash = useCallback(async () => {
        await SplashScreen.preventAutoHideAsync();
        handleStart();
    }, []);
    
    showSplash();

    const hideSplash = useCallback(async () => {
        if (appReady) await SplashScreen.hideAsync();
    }, [appReady]);

    if (!appReady) return null;

    return (
        <View
            style={{ flex: 1 }}
            onLayout={hideSplash}
        >
            <Root />
        </View>
    );
};

export default App;

[kayode0x]

Fix. Thanks to @nandorojo

Try yarn why expo-modules-autolinking. If you’re below 0.8.1, try adding a yarn resolution to 0.8.1:

package.json

{ "resolutions": { "expo-modules-autolinking": "0.8.1" } }