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

[sunknudsen]

Describe the bug

I am working on a create-react-app project.

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

Which ones are watched appears to be inconsistent which leads me to believe that I might have reached a limit.

This assumption is inspired by https://github.com/webpack/watchpack/issues/46.

Versions (please complete the following information):

• Chokidar version [3.5.1]
• Node version [14.15.1]
• OS version: [macOS Catalina 10.15.7]

To Reproduce:

This issue is hard to reproduce, but I will try my best if required.

Expected behavior

All packages inside of node_modules should be watched.

[sunknudsen]

Hey @paulmillr,

I was able to recreate the issue using the following steps on macOS Catalina 10.15.7.

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

If we're lucky (or unlucky depending on the perspective), you will not see Compiling... and the browser will not reload.

If it works, please try stopping npm start (I use ctrl+c) and try another pass. At my end, it feels like Russian roulette (it works sometimes and others, it doesn't).

Very strange (and excruciating) edge case!

While I hopefully have your attention, are you aware of any issues with hard links on macOS? Somehow, hard linked packages under node_modules do not trigger watch events even though the content of files has changed.

I am developing a utility called npm-hardlink to mitigate a React issue.

Status update: given hard links are not watched by chokidar (might actually be related to how hard links work vs a bug), I deprecated npm-hardlink in favor of npm-sync.

[paulmillr]

yeah I don't think we test against hardlinks, so they may or may not work

[sunknudsen]

@paulmillr What is your gut feeling about the above edge case?

I believe it is likely related to chokidar, but it could also be an issue at the Webpack or Create React App level.

[paulmillr]

any part of the stack can be wrong. of course, any debugging would be very welcome. I don't use webpack unfortunately.

[sunknudsen]

Hey @paulmillr,

Stumbled upon the following in the Webpack docs.

On macOS, folders can get corrupted in certain scenarios. See this article.

Also, I believe chokidar's fsevents dependency might be broken.