Metro is not detecting newly created folders in development builds #36511

ashuvssut · 2023-03-17T13:11:11Z

Description

Summary

Metro is not detecting newly created folders. I need to restart the bundler after creating a new folder in order to use the folder --- like first add .ts/.js/.tsx/.jsx files in the folder and import stuff from them.

I am using react-native 0.71.4
This issue lies with metro v0.73.8 that is shipped with React Native v0.71.4

In all my expo & non-expo (vanilla react native) project this issue exists where react native version is 0.71.4

my previous non-expo react native v0.68.1 project does not has these issues.

What is the fix I used?
I am using metro bundler 0.76.0 in my app which fixes this issues. I am opening this issue to notify the problems I faced with the metro bundler 0.73.8 that is being shipped with react native 0.71.4

Explanation: How I found out that metro is not detecting new folder?

Whenever I create a new .ts/.js/.tsx/.jsx file in <expo-proj-root>/src/ the app correctly loads the newly created .ts/.tsx file (I can see the "Refreshing..." toast on my app)

Note that src folder was already there before starting metro server. That's why there was no error

Now the metro server is running.
BUT whenever I created a new folder (let's say some-folder) like <expo-proj-root>/src/some-folder and add a file inside it (say some-folder/abc.ts) , that newly created file is not loading in my app (there is no "Refreshing..." toast on my app)
I get this following error:
Unable to resolve "./src/some-folder/abc" from "App.tsx"

But when restart the Metro bundler and reload the app, this error is gone.

Stacktrace (if a crash is involved)

Full error stack trace

Android Bundling complete 55ms
Unable to resolve "./src/some-folder/abc" from "App.tsx"
 ERROR  [Error: undefined Unable to resolve module ./src/some-folder/abc from /home/ashu/Desktop/walkingpal/apps/client/App.tsx: 

None of these files exist:
  * src/some-folder/abc(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * src/some-folder/abc/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
> 1 | import React from "react";
  2 | import { StyleSheet, Text, View } from "react-native";
  3 | import { Button } from "react-native-paper";
  4 | import "expo-dev-client";]
Error: Unable to resolve module ./src/some-folder/abc from /home/ashu/Desktop/walkingpal/apps/client/App.tsx: 

None of these files exist:
  * src/some-folder/abc(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * src/some-folder/abc/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
> 1 | import React from "react";
  2 | import { StyleSheet, Text, View } from "react-native";
  3 | import { Button } from "react-native-paper";
  4 | import "expo-dev-client";
    at ModuleResolver.resolveDependency (/home/ashu/Desktop/walkingpal/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:137:15)
    at DependencyGraph.resolveDependency (/home/ashu/Desktop/walkingpal/node_modules/metro/src/node-haste/DependencyGraph.js:260:43)
    at Object.resolve (/home/ashu/Desktop/walkingpal/node_modules/metro/src/lib/transformHelpers.js:177:21)
    at Graph._resolveDependencies (/home/ashu/Desktop/walkingpal/node_modules/metro/src/DeltaBundler/Graph.js:432:35)
    at Graph._processModule (/home/ashu/Desktop/walkingpal/node_modules/metro/src/DeltaBundler/Graph.js:218:38)
    at async Graph._traverseDependenciesForSingleFile (/home/ashu/Desktop/walkingpal/node_modules/metro/src/DeltaBundler/Graph.js:207:5)
    at async Graph.traverseDependencies (/home/ashu/Desktop/walkingpal/node_modules/metro/src/DeltaBundler/Graph.js:147:9)
    at async DeltaCalculator._getChangedDependencies (/home/ashu/Desktop/walkingpal/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:247:42)
    at async DeltaCalculator.getDelta (/home/ashu/Desktop/walkingpal/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:90:16)
    at async DeltaBundler.getDelta (/home/ashu/Desktop/walkingpal/node_modules/metro/src/DeltaBundler.js:67:12)

React Native Version

0.71.4

Output of `npx react-native info`

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 AMD Ryzen 7 4700U with Radeon Graphics
    Memory: 2.35 GB / 7.19 GB
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.19.1 - /run/user/1000/fnm_multishells/66137_1679052310859/bin/node
    Yarn: 1.22.19 - /run/user/1000/fnm_multishells/66137_1679052310859/bin/yarn
    npm: 8.19.3 - /run/user/1000/fnm_multishells/66137_1679052310859/bin/npm
    Watchman: 2023.03.13.00 - /home/linuxbrew/.linuxbrew/bin/watchman
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: AI-221.6008.13.2211.9619390
  Languages:
    Java: 11.0.18 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 10.1.3 => 10.1.3 
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.4 => 0.71.4 
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce + link to a repository

I have pushed the minimal repro demo at https://github.com/ashuvssut/expo-dev-client-bug-repro

Read the README given at that repo to get the reproducible steps

The text was updated successfully, but these errors were encountered:

github-actions · 2023-03-17T13:11:30Z

⚠️	Newer Version of React Native is Available!
ℹ️	You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

lunaleaps · 2023-03-17T21:32:34Z

This seems similar to: #36387
Closing for now but feel free to add more context to the issue above, thanks for your detailed report!

nithianandan90 · 2023-03-19T01:42:40Z

Please install Watchman.

Windows users without Watchman are facing this bug with the RN versions > 0.71.1.

https://facebook.github.io/watchman/docs/install.html

ashuvssut · 2023-03-19T14:03:19Z

@nithianandan90 kindly see my npx react-native info logs. I have watchman installed

Binaries:
Node: 16.19.1 - /run/user/1000/fnm_multishells/66137_1679052310859/bin/node
Yarn: 1.22.19 - /run/user/1000/fnm_multishells/66137_1679052310859/bin/yarn
npm: 8.19.3 - /run/user/1000/fnm_multishells/66137_1679052310859/bin/npm
Watchman: 2023.03.13.00 - /home/linuxbrew/.linuxbrew/bin/watchman 👈️👈️👈️👈️

robhogan · 2023-03-20T10:47:35Z

@ashuvssut - it may be the case that Watchman is installed but not being used. useWatchman: false in your Metro config would be an obvious reason but there could be others. You can try starting Metro with DEBUG=Metro:*, which should show you which watcher is being used. If it's the Node watcher, this sounds very much like the known issue, workarounds at #36387 (comment).

If Watchman is installed but not being used, that in itself sounds like an issue worth debugging. Could you paste the output of watchman list-capabilities?

ashuvssut · 2023-03-21T12:48:46Z

@robhogan as I mentioned in the issue, my issue is solved by using metro bundler v0.76.0

Here are the 2 logs.

watchman list-capabilities
DEBUG='Metro:*' yarn client:metro

1. `watchman list-capabilities`

$ watchman list-capabilities
{
    "version": "2023.03.13.00",
    "capabilities": [
        "watcher-eden",
        "scm-git",
        "saved-state-local",
        "watcher-inotify",
        "cmd-watch",
        "cmd-watch-list",
        "cmd-watch-del",
        "cmd-clock",
        "clock-sync-timeout",
        "cmd-trigger",
        "cmd-unsubscribe",
        "cmd-state-enter",
        "cmd-since",
        "cmd-query",
        "cmd-global-log-level",
        "cmd-get-config",
        "cmd-get-sockname",
        "cmd-list-capabilities",
        "cmd-log-level",
        "cmd-debug-watcher-info-clear",
        "cmd-debug-watcher-info",
        "cmd-debug-symlink-target-cache",
        "cmd-debug-root-status",
        "cmd-debug-status",
        "cmd-debug-set-parallel-crawl",
        "cmd-debug-poison",
        "cmd-debug-ageout",
        "cmd-trigger-del",
        "suffix-set",
        "cmd-debug-contenthash",
        "dedup_results",
        "relative_root",
        "glob_generator",
        "cmd-state-leave",
        "field-type",
        "field-cclock",
        "field-oclock",
        "field-mtime_f",
        "cmd-debug-get-asserted-states",
        "field-nlink",
        "cmd-debug-recrawl",
        "field-ino",
        "field-atime_ns",
        "field-gid",
        "field-ctime_f",
        "field-ctime_ns",
        "field-ctime",
        "field-ctime_us",
        "scm-hg",
        "field-exists",
        "cmd-log",
        "field-ctime_ms",
        "cmd-version",
        "field-size",
        "field-mtime_ms",
        "field-mode",
        "field-mtime",
        "field-atime",
        "field-mtime_ns",
        "field-atime_ms",
        "field-atime_us",
        "field-name",
        "cmd-subscribe",
        "field-symlink_target",
        "cmd-get-log",
        "field-atime_f",
        "cmd-flush-subscriptions",
        "field-content.sha1hex",
        "scm-since",
        "term-type",
        "cmd-debug-set-subscriptions-paused",
        "term-true",
        "term-suffix",
        "cmd-watch-project",
        "cmd-find",
        "term-size",
        "term-pcre",
        "cmd-debug-get-subscriptions",
        "term-not",
        "term-name",
        "term-match",
        "term-ipcre",
        "term-iname",
        "field-dev",
        "term-imatch",
        "term-idirname",
        "term-false",
        "cmd-trigger-list",
        "term-exists",
        "cmd-debug-show-cursors",
        "field-new",
        "term-empty",
        "term-dirname",
        "cmd-watch-del-all",
        "field-uid",
        "term-since",
        "term-anyof",
        "wildmatch-multislash",
        "field-mtime_us",
        "term-allof",
        "wildmatch",
        "bser-v2",
        "cmd-debug-drop-privs",
        "cmd-get-pid",
        "cmd-shutdown-server"
    ]
}

2. `DEBUG='Metro:*' yarn client:metro`

When starting Metro with DEBUG=Metro:*

  Welcome to Metro v0.73.8
              Fast - Scalable - Integrated
              
r - reload the app
d - open developer menu
i - run on iOS
a - run on Android

  Metro:Watcher Beginning crawl with "watchman". +0ms
  Metro:Watcher Crawler "watchman" returned 1 added/modified, 0 removed, 1 clock(s). +40ms
  Metro:Watcher Using watcher: watchman +80ms
  Metro:WatchmanWatcher Received watch-project response: apps/client +52ms
  Metro:WatchmanWatcher Received clock response: c:1679402381:7396:2:93 +1ms
  Metro:WatchmanWatcher Received subscribe response: metro-file-map-8436--mylib-_dev-walkingpal-0712-apps-client-32324a5007d67d83197e398df5a21627 +1ms
  Metro:WatchmanWatcher Received watch-project response: node_modules +0ms
  Metro:WatchmanWatcher Received clock response: c:1679402381:7396:2:94 +1ms
  Metro:WatchmanWatcher Received watch-project response: libs +0ms
  Metro:WatchmanWatcher Received subscribe response: metro-file-map-8436--mylib-_dev-walkingpal-0712-node_modules-e07e0fb9ad721976325f837f8a1004b4 +0ms
  Metro:WatchmanWatcher Received clock response: c:1679402381:7396:2:95 +1ms
  Metro:WatchmanWatcher Received subscribe response: metro-file-map-8436--mylib-_dev-walkingpal-0712-libs-9dd62b0d3d7f78df897be0261d132a90 +0ms
  Metro:WatchmanWatcher Received subscription response: metro-file-map-8436--mylib-_dev-walkingpal-0712-node_modules-e07e0fb9ad721976325f837f8a1004b4 (fresh: false, files: 2, enter: undefined, leave: undefined) +27s
  Metro:WatchmanWatcher Handling change to: .cache/nx/d/.watchman-cookie-linu-7396-2 (new: true, exists: false) +0ms
  Metro:WatchmanWatcher Handling change to: .cache/nx/d (new: false, exists: true) +12ms

robhogan · 2023-03-22T16:21:28Z

Thanks for the info!

my issue is solved by using metro bundler v0.76.0

Are the logs you've given using [email protected]? I'd be interested to see the logs you'd see in the failing case, with [email protected].

The concern for me is that with Watchman installed and working, #36387 shouldn't apply to you. So this sounds like a different bug - either Watchman isn't properly detected when you use 0.73.8, or there's an issue with the Watchman backend in your case. It's great that 0.76.0 works for you but I want to make sure we catch and backport any bugs in 0.73.x. Appreciate your help!

devalnor · 2023-03-27T14:16:08Z

I have the same issue.
It's seems that folder named with client are not working.
I renamed it and it work for me.

ashuvssut added the Needs: Triage 🔍 label Mar 17, 2023

github-actions bot added the Newer Patch Available label Mar 17, 2023

react-native-bot added the Platform: Linux Building on Linux. label Mar 17, 2023

ashuvssut mentioned this issue Mar 17, 2023

Metro is not detecting newly created folders in development builds expo/expo#21665

Closed

lunaleaps closed this as completed Mar 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Metro is not detecting newly created folders in development builds #36511

Metro is not detecting newly created folders in development builds #36511

ashuvssut commented Mar 17, 2023 •

edited

Loading

github-actions bot commented Mar 17, 2023

lunaleaps commented Mar 17, 2023

nithianandan90 commented Mar 19, 2023

ashuvssut commented Mar 19, 2023 •

edited

Loading

robhogan commented Mar 20, 2023

ashuvssut commented Mar 21, 2023 •

edited

Loading

robhogan commented Mar 22, 2023 •

edited

Loading

devalnor commented Mar 27, 2023

Metro is not detecting newly created folders in development builds #36511

Metro is not detecting newly created folders in development builds #36511

Comments

ashuvssut commented Mar 17, 2023 • edited Loading

Description

Summary

Stacktrace (if a crash is involved)

React Native Version

Output of npx react-native info

Steps to reproduce + link to a repository

github-actions bot commented Mar 17, 2023

lunaleaps commented Mar 17, 2023

nithianandan90 commented Mar 19, 2023

ashuvssut commented Mar 19, 2023 • edited Loading

robhogan commented Mar 20, 2023

ashuvssut commented Mar 21, 2023 • edited Loading

1. watchman list-capabilities

2. DEBUG='Metro:*' yarn client:metro

robhogan commented Mar 22, 2023 • edited Loading

devalnor commented Mar 27, 2023

ashuvssut commented Mar 17, 2023 •

edited

Loading

Output of `npx react-native info`

ashuvssut commented Mar 19, 2023 •

edited

Loading

ashuvssut commented Mar 21, 2023 •

edited

Loading

1. `watchman list-capabilities`

2. `DEBUG='Metro:*' yarn client:metro`

robhogan commented Mar 22, 2023 •

edited

Loading