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

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® Core™ 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

About this issue

Original URL
State: closed
Created a year ago
Comments: 31 (6 by maintainers)

Commits related to this issue

Add integration test for changed file in new directory (https://github.com/facebook/react-native/issues/36387) — committed to facebook/metro by robhogan a year ago
Add integration test for changed file in new directory (https://github.com/facebook/react-native/issues/36387) — committed to facebook/metro by robhogan a year ago
Add integration test for changed file in new directory (https://github.com/facebook/react-native/issues/36387) — committed to facebook/metro by robhogan a year ago
Add integration test for changed file in new directory (#950) Summary: Cherry pick the new integration test covering https://github.com/facebook/react-native/issues/36387 from https://github.com/face... — committed to facebook/metro by robhogan a year ago

Most upvoted comments

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.

+23

robhogan on Mar 29, 2023

Are folks having this problem exclusively on Windows?

lunaleaps on Mar 16, 2023

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.

bagraercan on Mar 10, 2023

Sorry for missing information.

The error is

bagraercan on Mar 7, 2023

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.

dukmanjak on Aug 31, 2023

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