Metro bundler: Error: EISDIR: illegal operation on a directory, read

Question

When I reload my bundle this exception is uncaught:

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (fs.js:592:3)
    at tryReadSync (fs.js:366:20)
    at Object.readFileSync (fs.js:403:19)
    at UnableToResolveError.buildCodeFrameMessage (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17)
    at new UnableToResolveError (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35)
    at ModuleResolver.resolveDependency (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
    at DependencyGraph.resolveDependency (/home/brady/obs-websocket-app/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at /home/brady/obs-websocket-app/node_modules/metro/src/lib/transformHelpers.js:317:42
    at /home/brady/obs-websocket-app/node_modules/metro/src/Server.js:1471:14
    at Generator.next (<anonymous>)

My package.json

{
  "main": "src/index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@types/node": "^14.14.35",
    "events": "^3.3.0",
    "expo": "~40.0.0",
    "expo-splash-screen": "~0.8.0",
    "expo-updates": "~0.4.0",
    "obs-websocket-js": "^4.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.64.0",
    "react-native-elements": "^3.3.2",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "~2.15.0",
    "react-native-unimodules": "~0.12.0",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-dom": "~16.9.8",
    "@types/react-native": "~0.63.2",
    "babel-preset-expo": "~8.3.0",
    "jest-expo": "~40.0.0",
    "typescript": "~4.0.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

Solution 1

Apparently there's an issue with moving index.js to src/index.js. I moved it back to the project root and it's working fine now.

Solution 2

Replace this code in `MainApplication.java

        @Override
        protected String getJSMainModuleName() {
          return "src/index"; <---add this
        }

Solution 3

For IOS

// packages/myapp/ios/myapp/AppDelegate.m:56
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"src/index" fallbackResource:nil];

Solution 4

Solved by deleting and creating new android emulator...

View more solutions

Comments

[Surya]

In my project, index.js is in root but still facing the issue. Any idea?

[Brady Dean]

Not sure about your case. This was the only change that fixed it for me.

[Vencovsky]

How to do this but for IOS?

[XoXo]

was containing: jsBundleURLForBundleRoot:@"index"

[Vencovsky]

If you are using a monorepo (my case) and getting this problem, changing this to something like packages/my-project/index works like a charm.

[Vencovsky]

If you are using a monorepo (my case) and getting this problem, changing this to something like packages/my-project/index works like a charm.

[Mike S.]

Sadly, this isn't my issue. My index.js already lives in the root. I'm still looking for a solution. I've read elsewhere that it could be a problem with using react-native-animated. This error is new for me. Until today, I was able to launch the simulator in debug mode. Now, the app launches correctly normally and hangs with this "illegal operation" metro error. Disabling debug allows the app to reload/launch normally.

[Tha Brad]

nope, also didn't do it for me

[Mahad Ahmed]

The index.js was missing, don't know when I deleted it, but after recovering it things worked again.