HMR middleware does not recognize file changes if the path includes brackets

[aduggleby]

Title

HMR middleware does not recognize file changes if the path includes brackets

Functional impact

Changes to files do not trigger a webpack recompile and consequently no changes are propagated to browser.

Minimal repro steps

Create a directory with brackets e.g. ("c:\temp\test\With (Brackets)") and run "yo aspnetcore-spa" with React/Redux and CSPROJ setting. Load project in Visual Studio, run it, change Home.tsx and the change will not propagate to the browser. This is despite the browser showing [HMR] connected.
Change the directory name to "NoBrackets" and the identical project will work flawlessly.

Expected result

Changes should be propagated to the browser regardless of brackest.

Actual result

The browser is not refreshing the view and showing the old version.

Further technical details

Unfortunately if you link a business Dropbox to your personal Dropbox it changes the personal Dropbox path to "Dropbox (Private)" which is where this issue popped up for me.

[SteveSandersonMS]

Thanks very much for reporting this, and for the clear repro steps!

I was able to reproduce the issue. However, it's not specific to ASP.NET Core. I was also able to repro the same issue using this standalone react boilerplate (when it's cloned into a dir without brackets, it works, when the dirname has brackets it doesn't).

So, if you want to get this fixed, you might need to work out whether the issue is inside Webpack or something React-specific (e.g., react-transform-hmr), and then report it to the relevant project maintainers.

Hope that's OK. I know it would be easier if we were able to track down and solve all the issues in this repo, but since we're taking dependencies on so many OSS components, we don't have the capacity to track down and fix issues in all of them. Sorry for the inconvenience!

[aduggleby]

Thanks Steve, understood - I think having the issue here is already beneficial for people troubleshooting and searching. I'll try to get around finding out which specific component is at fault.

[aduggleby]

Quick update for those coming across this:
Root cause seems to be the npm module is-glob used by chokidar (event emitter for file changes). Chokidar still uses 2.0 but the brackets bug has been fixed in is-glob version >= 3.0.
This tracked by this issue: paulmillr/chokidar#533

Until a new version of chokidar is released you can either use "npm shrinkwrap" functionality to manually direct choikdar to use 3.0 (this approach failed due to some errors in @types directory - a bug for another day).

My approach that worked was:

• npm install is-glob
• Manually edit package.json in node_modules/chokidar and change ^2.0.0 dependency on is-glob to ^3.0.0.
• Then go ahead and delete the is-glob 2.0 directory from node_modules/chokidar/node_modules/is-glob.
  (n.b. This is a classic "works-on-my-machine" patch, but should get you going again.)

See also:

• Watching doesn't work if parent directory contains special characters webpack/watchpack#42

[SteveSandersonMS]

That's really impressive debugging! Thanks for letting us know the outcome.

I guess the problem will go away on its own eventually :)