None of these files exist: Metro is not detecting files in newly created directories on Windows, Linux for 0.71

[bagraercan]

Description

Hi everyone,
i have followed official react-native docs https://reactnative.dev/docs/environment-setup and have just created a new react-native app and unfortunately had a strange problem.
It cannot find the files which are clearly in the app structure.

The error

My project structure

App.tsx

metro.config.js

package.json

I saw the same problem which other developers asked but none of the solutions fixed my problem.
if i use yarn cache clean and restart the application, it will work for the directory that i had the problem but if i make another folder and file under src, it will crash again.
I have also created some react-native apps earlier but never had a problem like this.
Can you please help me on this?

React Native Version

0.71.3

Output of npx react-native info

System:
OS: Windows 10 10.0.19044
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Memory: 4.32 GB / 15.77 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.17.0 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-212.5712.43.2112.8512546
Visual Studio: Not Found
Languages:
Java: 11.0.18 - C:\Program Files\Microsoft\jdk-11.0.18.10-hotspot\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.3 => 0.71.3
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

create another folder and file under src and re-run the app

Snack, code example, screenshot, or link to a repository

https://github.com/bagraercan/rn-rud

[iBotPeaches]

What is the error you are getting? I see all this explanation, but unsure what exact error you are dealing with.

[SpectreWulf]

What is the error you are getting? I see all this explanation, but unsure what exact error you are dealing with.

I just started a new React Native (0.71.3) project from scratch and facing a similar issue. I will try to explain it better:

My Project Structure is simple with this kind of a structure:

src
>Screens
>TestA > TestA.tsx
>TestB > TestB.tsx

1. I run the app on Android using 'npx react-native run-android' command.
2. App compiles and starts emulator and installs the app and Live Reload works on any changes made on the files. So far so good.
3. Now I add a new screen under Screens (which is under src directory), under a new folder called 'TestC'. Now my project structure looks like this:

src
>Screens
>TestA > TestA.tsx
>TestB > TestB.tsx
>TestC > TestC.tsx

4. Now when I try to import TestC.tsx it immediately crashes the app, and the metro server throws error citing that it's a module resolver error and none of the files exists.
5. Only workaround: Clean the android Build and re-compile the app.
6. However now if I add a similar new screen 'TestD' it again throws the same error, until I clean and compile a new build.

[bagraercan]

Sorry for missing information.

The error is

[SpectreWulf]

Sorry for missing information.

The error is

Yes I am getting the same module resolver issue.

[iBotPeaches]

@bagraercan - This sounds like Watchman is not able to crawl/detect changes to FS, which might explain those errors.

Does npx react-native doctor report a valid watchman?

[bagraercan]

@bagraercan - This sounds like Watchman is not able to crawl/detect changes to FS, which might explain those errors.

Does npx react-native doctor report a valid watchman?

here is the output

It seems android sdk not found but it is already installed. I can work on other android apps.

[priyaWedo]

hello @bagraercan if you exported it with default (export default homeScreen) then no need to provide { } brackets in the time of import,
like: import homeScreen from './src/screens/home/homeScreen'

and it is just advice to give proper file name, so it will be easy read and understand like "homeScreen.js"

[bagraercan]

Hi @priyaWedo i export it as export const HomeScreen. That is not the problem. If i click on HomeScreen, it jumps to that component.

[DejaVuMan]

I wanted to report a similar issue occurring on my end as well - I was having issues importing images for use and had everything correctly configured to my knowledge, but running npx react-native doctor also found Android SDK missing. Allowing it to manually resolve the issue appears to have solved it.

@bagraercan , did you try allowing the doctor command to resolve the error?

[bagraercan]

After the npx react-native doctor command, i choose the option to try fixing the problem. It says it successfully solved, restart your computer. But i see the same result after all these operations.

Edit: Currently i installed Android SDK Command-line tools in Android studio and now it finds the Android Sdk. So, npx react-native doctor command runs successfully. But unfortunately it did not solve my problem.

[learncodingforweb]

I am also getting same error after try to include file under folder app inside root folder of app
None of these files exist:

• app\useCamera(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• app\useCamera\index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  2 | import {StyleSheet, Text, View} from 'react-native';
  3 | import {RTCView} from 'react-native-webrtc';
  4 | import useCamera from './app/useCamera';

npx react-native doctor
Common
✓ Node.js
✓ yarn

Android
✓ JDK
✓ Android Studio - Required for building and installing your app on Android
✓ Android SDK - Required for building and installing your app on Android
✓ ANDROID_HOME

Errors: 0
Warnings: 0

if anyone able to solve this, please update

[Gurkankaradag0]

Can anyone please let me know if they can solve this

[devfraga]

I'm also getting this error, creating a new project with react native 0.71+ every time I create new components it points out the error (none of these files exist, error) but if I stop running the project and run it again then it works perfectly.

[Gurkankaradag0]

I'm also getting this error, creating a new project with react native 0.71+ every time I create new components it points out the error (none of these files exist, error) but if I stop running the project and run it again then it works perfectly.

Yes it works that way but it's annoying to reboot all the time.

[Rafael3326]

I'm also having this error, I'm having to restart the project every time I create components and import them in other places, it's unbearable

[Rafael3326]

as ferramentas de linha de comando do Android SDK

managed to solve the problem?

[lunaleaps]

@bagraercan Sorry to hear about your issue -- were you following the instructions for Windows, Android on the docs from the "React Native CLI Quickstart"?

Have you been able to start a React Native application before and this is a regression for 0.71? Or is this your first attempting?

[bagraercan]

Hi @lunaleaps yes, i have followed the documentation you mentioned above. I made some test with earlier versions like 0.69 and 0.70, i do not get this error. It happens only in 0.71..
Also when i create an app with v0.70.6, the application is started with App.js but in v0.71. it is App.tsx.
i am still looking for the solution !

[SpectreWulf]

@bagraercan Sorry to hear about your issue -- were you following the instructions for Windows, Android on the docs from the "React Native CLI Quickstart"?

Have you been able to start a React Native application before and this is a regression for 0.71? Or is this your first attempting?

I am facing the same issue and I also have projects on older version of React Native (0.61.5) which has no issues like this.

I am facing this issue on a brand new React Native setup (0.71.3)

[lunaleaps]

Are folks having this problem exclusively on Windows?

[bagraercan]

Are folks having this problem exclusively on Windows?

yes i think so

[Rafael3326]

As pessoas estão tendo esse problema exclusivamente no Windows?

no, in my case i am using POP OS operating system, linux.

[learncodingforweb]

i am getting same issue while running on windows 10 and ubuntu 22.04 OS

[ArclabsVince]

Same issue. Windows 11 react native 0.71.4

[aceproject]

I faced same issue and fixed it as following temporarily and annoying solution.

cd android && gradlew clean
cd .. && react-native run-android

[robhogan]

Update: This is now fixed in React Native 0.71.5 - the best solution is to update.

Apologies for this and thanks for all the reports, we've tracked this down to a bug introduced in Metro 0.73.6, which affects all versions of React Native since 0.71.1 (inclusive). We'll prepare a fix for release with React Native 0.71.5.

Impact

• Directories created or moved since Metro was started will usually not be watched for changes to their contents.

Affected users

• Windows and Linux users not using Watchman. In rare cases, MacOS users who don't have the optional fsevents dependency installed may be affected.

Workarounds

Either installing Watchman or using an unaffected version of metro-file-map should work around this issue:

Install Watchman

Watchman is available for all platforms - see installation instructions for options.

Override metro-file-map to use a newer version

By modifying your project's package.json you can force the affected Metro component to a newer version.

If you're using Yarn, add this to your package.json:

 "resolutions": {
   "**/metro-file-map": "0.76.0"
 },

For NPM users:

  "overrides": {
    "metro-file-map": "0.76.0"
  }

And for PNPM:

  "pnpm": {
    "overrides": {
      "metro-file-map": "0.76.0"
    }
  }

Then reinstall your dependencies by running yarn / npm / pnpm.

[robhogan]

Fix published with https://github.com/facebook/react-native/releases/tag/v0.71.5.

[osenbal]

9.
same bro i too have a problem

[Honorroads]

Fix published with https://github.com/facebook/react-native/releases/tag/v0.71.5.

I am having an issue: am using Mac: here is my error Unable to resolve module ../screens/SearchResults from /Users/blessedboy/Desktop/clone/Uber/src/navigation/Home.js:

None of these files exist:

• src/screens/SearchResults(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
• src/screens/SearchResults/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  3 | import { createStackNavigator } from '@react-navigation/stack'
  4 | import DestinationSearch from "../screens/DestinationSearch";

5 | import SearchResults from "../screens/SearchResults";
| ^
6 | import OrderScreen from "../screens/OrderScreen";
7 |
8 | const Stack = createStackNavigator();

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
I have idea why and all my codes and files are imported correctly

[AadarMicroart]

Any update @Honorroads, I'm having a similar issue and I can't find a fix

[dukmanjak]

I highly doubt this will help... and I am working on Mac Monterey but I struggled for several hours, but I had ALL of the same problems. Metro Version 76.7 and it would never recognize the sdk changed directories, and got the same issue with the SDK N/A. After changing paths back and forth I tried

---- npx react-native start --reset-cache ----

and suddenly it found the SDK.

Sorry if it doesn't help, but it fixed my issue.