How to Fix “main.jsbundle Does Not Exist” Error in React Native?

Here we’re providing a list of solutions to fix the “main.jsbundle does not exist” error when archiving or building React Native iOS apps, ordered by most effective approaches.

Solution 1:

Generate the bundle file and add it to your Xcode project:

// Add this to your package.json scripts section:
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"

// Then run:
npm run build:ios  // or yarn build:ios

After running this command:
1. Open Xcode
2. Right-click on your project in the project navigator
3. Select “Add Files to [YourProjectName]”
4. Select the generated main.jsbundle file
5. Make sure “Copy items if needed” is checked
6. Add the file to your app target
7. Finally, add main.jsbundle to “Copy Bundle Resources” in Build Phases

Solution 2:

For newer React Native projects where index.js is the entry point (not index.ios.js):

// Add to package.json scripts:
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/YourAppName/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
// Then run:
npm run build:ios

Note: Make sure to replace ‘YourAppName’ with your actual app name in the path

Solution 3:

Fix path issues by putting the bundle directly in the app directory:

// Add to package.json scripts:
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/YourAppName/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios/YourAppName'"

This ensures the assets are also copied to the correct location.

Solution 4:

For TypeScript projects, make sure to keep your root index.js file (don’t convert it to index.ts):

React Native specifically looks for index.js as the entry point file. If you’re using TypeScript, your index.js file should simply import and register your app from your TypeScript files:

// index.js (keep this file as .js, not .ts)
import {AppRegistry} from 'react-native';
import App from './src/App'; // Your TypeScript app entry
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Solution 5:

For Expo projects that switched from bare workflow to managed workflow:

Make sure your app is properly registered with registerComponent:

import { registerRootComponent } from 'expo';
import App from './App';

// Register the app
registerRootComponent(App);

Solution 6:

Try cleaning your project:

1. In Xcode, go to Product > Clean Build Folder
2. Delete the DerivedData folder:
~/Library/Developer/Xcode/DerivedData
3. Rebuild your project

Conclusion:

The “main.jsbundle does not exist” error occurs because React Native needs a pre-bundled JavaScript file for production builds, but it doesn’t generate this automatically. Here are the key points to remember:

• Always generate the bundle file manually before archiving for production
• Make sure the bundle file is properly added to your Xcode project and Build Phases
• Use the correct entry file name (index.js for newer projects, index.ios.js for older ones)
• Ensure the path to output the bundle file is correct for your project structure
• For TypeScript projects, keep the root index.js file as JavaScript
• Node version compatibility issues can sometimes cause this problem – try using Node 16 if you’re on Node 18+