src subdirectory files does not update react app

[Dosx001]

Describe the bug

I only started learning React this week. Everything was working fine when all files were under the src directory. Then I made subdirectories like src/pages and src/components, and moved some files to those directories. If edit files like src/App.js then the React app would update. However, if edit something like src/pages/Home.tsx, the React app would not be updated unless I restart the server.

Did you try recovering your dependencies?

It's a fresh new project. Not an option.

Which terms did you search for in User Guide?

npm start doesn’t detect changes
src subdirectories
src subdirectory files not updating react app

Environment

Windows 10 19043.1215
WSL 2: Arch Linux
https://github.com/yuk7/ArchWSL

Environment Info:

current version of create-react-app: 5.0.0
running from /home/dosx/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: Linux 5.10 Arch Linux
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Binaries:
Node: 17.3.0 - /usr/sbin/node
Yarn: 1.22.17 - /usr/sbin/yarn
npm: 8.3.0 - /usr/sbin/npm
Browsers:
Chrome: Not Found
Firefox: 95.0.2
Edge: 96.0.1054.62
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

git clone https://github.com/Dosx001/dosx001.github.io/
cd dosx001.github.io
yarn run start # or "npm run start"

Edit any file under src/pages or src/components

Expected behavior

React app would update when editing all files in the src directory.

Actual behavior

When editing files under src/pages and src/components React app does not update.

Reproducible demo

https://github.com/Dosx001/dosx001.github.io

[Dosx001]

Another interesting note.

If edit a file and save the changes in src/pages or src/components. Then copy the file to the src directory and then update the path in src/App.tsx, something like import SideBar from './components/SideBar'; to import SideBar from './SideBar';, then the React app would update. However, if I change the path back to original the React app would revert back to its original state.

[Dosx001]

Here's a video of what I mean.
https://www.youtube.com/watch?v=DSx2Zj2_glE

[Dosx001]

Also every time I run yarn run start, I get this message.

(node:21783) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:21783) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

node --trace-deprecation ... outputs:

node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module '/mnt/d/Repositories/html/dosx001.github.io/...'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

Node.js v17.3.0

[Dosx001]

I checked out this page.
https://github.com/webpack/docs/wiki/troubleshooting#not-enough-watchers

cat /proc/sys/fs/inotify/max_user_watches
Outputs 524288, so I think everything is good there.

Also, I am using Vim. I updated my .vimrc with set backupcopy=yes. But that didn't help.

I even created a .env file with FAST_REFRESH=false

I switched to VS Code and used WSL Remote but I was having the same exact experience.

Also, I restarted the App every time for each step.

[cduff]

Also every time I run yarn run start, I get this message.

(node:21783) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use node --trace-deprecation ... to show where the warning was created) (node:21783) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

node --trace-deprecation ... outputs:

node:internal/modules/cjs/loader:936 throw err; ^

Error: Cannot find module '/mnt/d/Repositories/html/dosx001.github.io/...' at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:17:47 { code: 'MODULE_NOT_FOUND', requireStack: [] }

Node.js v17.3.0

I have raised the following issue for this: #11860