Unable to build an Expo App

Expo Development Tools
1

Hi everyone,

I am getting the error Unable to resolve “./registerRootComponent.mjs” from “AppEntry.js” when I try to build my Expo app for iOS.

I have checked the following things:

The file registerRootComponent.mjs is in the same directory as the file AppEntry.js.
The file registerRootComponent.mjs is a valid JavaScript file.
The file registerRootComponent.mjs is imported correctly in the file AppEntry.js.
The file registerRootComponent.mjs is not hidden.
The file registerRootComponent.mjs is not read-only.
I am not sure what else to check. Can anyone help me?

My AppEntry.js

import registerRootComponent from './registerRootComponent.mjs';
registerRootComponent(App);

class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

My App,js

import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { BluetoothSerial, Device, FlatList, Text, TextInput, Button } from 'react-native-bluetooth-serial';

const App = () => {
  const [devices, setDevices] = useState([]);
  const [selectedDevice, setSelectedDevice] = useState(null);
  const [message, setMessage] = useState('');

  const bleManager = new BluetoothSerial();

  useEffect(() => {
    bleManager.startScan(null, null, (error, device) => {
      if (error) {
        console.error(error);
      } else {
        setDevices((devices) => [...devices, device]);
      }
    });
  }, []);

  const handleDeviceSelect = (device) => {
    setSelectedDevice(device);
    bleManager.stopScan();
  };

  const handleSendMessage = async () => {
    if (!selectedDevice) {
      return;
    }

    const characteristic = await selectedDevice.getCharacteristic('B3B2BA57-8563-C50C-AD50-5AAA8564CD2D');
    if (!characteristic) {
      return;
    }

    await characteristic.writeValue(message);
  };

  const renderDevice = ({ item }) => {
    return (
      <Button title={item.name || item.id} onPress={() => handleDeviceSelect(item)} />
    );
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ padding: 16 }}>
        <Text>BLE Device Scanner</Text>
        <FlatList
          data={devices}
          keyExtractor={(item) => item.id}
          renderItem={renderDevice}
        />
        {selectedDevice && (
          <>
            <TextInput
              value={message}
              onChangeText={(text) => setMessage(text)}
              placeholder="Enter message"
            />
            <Button title="Send" disabled={!selectedDevice} onPress={async () => {
              const characteristic = await selectedDevice.getCharacteristic('B3B2BA57-8563-C50C-AD50-5AAA8564CD2D');
              if (!characteristic) {
                return;
              }

              await characteristic.writeValue(message);
            }} />
          </>
        )}
      </View>
    </SafeAreaView>
  );
};

export default App;

Thanks,

2

Here are some error messages I’m getting…
Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundling failed 386ms
Unable to resolve “./registerRootComponent.mjs” from “AppEntry.js”
iOS Bundling failed 7ms
Unable to resolve “./registerRootComponent.mjs” from “AppEntry.js”

3

I don’t think I posted this correctly, I looked for a way to paste a CODE BLOCK, but can’t
figure out how to do ii. Any suggestions

John

4

You can select the block of code and then press the </> button in the editor toolbar. Otherwise, you can manually put three backticks on a line above the block and another three backticks on a line below the block, like this:

```
code
here
```

You can optionally specify the type of data after the top line of backticks like this:
```javascript
code
here
```

This is to fix the syntax highlighting if it incorrectly guesses what type of code is in the code block.

5

A newly created Expo app will have the following in package.json:

  "main": "node_modules/expo/AppEntry.js",

That file contains the following:

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

What do you have in package.json? Where does your AppEntry.js live?

Your AppEntry.js looks unexpected. It imports registerRootComponent in a different way compared to the default Expo app. Then it defines an App class and registers it instead of importing from your App.js and registering that.

For more about the app entrypoint, see this: