Some packages within node_modules are not watched by Webpack while others are on macOS

[sunknudsen]

Describe the bug

Some packages within node_modules are not watched by Webpack while others are on macOS.

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

I searched issues on create-react-app, webpack-dev-server and chokidar.

I also created an issue on chokidar's repo (given I am not sure the issue is downstream, creating an issue here too).

Environment

Environment Info:

current version of create-react-app: 4.0.1
running from /Users/sunknudsen/.npm/_npx/14520/lib/node_modules/create-react-app

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Binaries:
Node: 14.15.1 - /usr/local/opt/node@14/bin/node
Yarn: Not Found
npm: 6.14.11 - /usr/local/bin/npm
Browsers:
Chrome: Not Found
Edge: Not Found
Firefox: 85.0
Safari: 14.0.1
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.1 => 4.0.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

Step 1: create a fresh create-react-app project using npx create-react-app my-app --template typescript

Step 2: install react-router-dom using npm install react-router-dom and npm install --save-dev @types/react-router-dom.

Step 3: edit App.tsx

import React, { FunctionComponent } from 'react';
import { BrowserRouter, Route, RouteComponentProps, Switch } from 'react-router-dom'
import logo from './logo.svg';
import './App.css';

const defaultRoute: FunctionComponent<RouteComponentProps> = function(props) {
  return <div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.tsx</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>
}

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route component={defaultRoute}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

Step 4: run npm start

Step 5: add console.log("BOOM"); under the import statements of node_modules/react-router/esm/react-router.js and save

Expected behavior

Editing react-router.js should consistently trigger "Compiling..." and browser reload.

Actual behavior

Editing react-router.js doesn't consistently trigger "Compiling..." and browser reload.

Reproducible demo

The above steps generate reproducible demo.

Thanks for your help!

[mahnunchik]

+1 no logs from node_modules