react navigation leads to no such file or directory

[naxmefy]

Error Message

Error: ENOENT: no such file or directory, open 'fs.js'
    at Object.openSync (fs.js:498:3)
    at Object.readFileSync (fs.js:394:35)
    at formatBundlingError (/Users/naxmefy/work/sgd/frontend/node_modules/metro/src/lib/formatBundlingError.js:93:10)
    at Server.<anonymous> (/Users/naxmefy/work/sgd/frontend/node_modules/metro/src/Server.js:907:36)
    at Generator.throw (<anonymous>)
    at asyncGeneratorStep (/Users/naxmefy/work/sgd/frontend/node_modules/metro/src/Server.js:99:24)
    at _throw (/Users/naxmefy/work/sgd/frontend/node_modules/metro/src/Server.js:122:9)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Steps to reproduce:

• create nx workspace
• add nx-react-native-expo
• add new expo project
• add react-navigation dependencies
• update example code
• run bundler + simulator
• enjoy the error

[naxmefy]

additional hint: the example code is running in web browser... only simulator/device prints the error

[naxmefy]

tested with simple new app from expo init - just worked

[leggomuhgreggo]

Running into the same problem, specifically w/ React Navigation v6 (v5 was working). @naxmefy did you figure out any resolution here?

[naxmefy]

Not yet - no time to investigate the Problem.

[leggomuhgreggo]

Thanks for the response!

I dug in and I think I figured out what was happening in my case.

Hope this is helpful for you as well.

TL;DR: There were some missing sub-dependencies:

yarn remove @react-native-community/masked-view
yarn expo install @react-native-masked-view/masked-view @react-navigation/elements

---

So I was getting:

Error: ENOENT: no such file or directory, open 'fs.js'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at formatBundlingError (/Users/yadayada/node_modules/metro/src/lib/formatBundlingError.js:93:10)
    at Server.<anonymous> (/Users/yadayada/node_modules/metro/src/Server.js:907:36)
    at Generator.throw (<anonymous>)
    at asyncGeneratorStep (/Users/yadayada/node_modules/metro/src/Server.js:99:24)
    at _throw (/Users/yadayada/node_modules/metro/src/Server.js:122:9)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

So I hovered over the formatBundlingError.js path in VSCode and option + clicked -- and then added a log statement like this:

Which showed me what file it was expecting and not finding:

    { errno: -2, syscall: 'lstat', code: 'ENOENT', path: node_modules/@react-navigation/elements/src/@react-native-masked-view' }

My first move was to install @react-navigation/elements -- but that didn't do it. Then I realized I had the old version of react-native-masked-view

-   "@react-native-community/masked-view": "0.1.10",
+  "@react-native-masked-view/masked-view": "0.2.4",

Finally the iOS simulator booted.

---

Edit: I was also clearing cache every other try with this, in case it's useful to anyone

watchman watch-del-all && \
  rm -rf 'node_modules' \
            'yarn.lock' \
            './.expo' \
            './apps/${YOUR_APP}/.expo' \
            './apps/${YOUR_APP}/node_modules' \
            './apps/${YOUR_APP}/yarn.lock' \
            './tmp' \
            '$TMPDIR/metro-cache' \
            '$TMPDIR/haste-*' \
  && yarn cache clean \
  && yarn install --force
  
# with simulator closed
xcrun simctl erase all