Possible Documentation Issue - watchPaths

[kevinswarner]

What version of Remix are you using?

1.7.5

Steps to Reproduce

I am wondering if there is a documentation issue related to watchPaths. In my effort to get watchPaths working in a Turborepo repo (which I still have not been able to), I came across inconsistent information about watchPaths.

The documentation...

https://remix.run/docs/en/v1/api/conventions#watchpaths

A discussion comment...

#3896 (comment)

Expected Behavior

I just wanted to get clarification.

Actual Behavior

NA

[kiliman]

Like I said in my comment, the paths should be an array of globs relative to the current project root. The docs are wrong in that it shows an absolute path.

I imagine if you need to access paths outside of the project root you can use .. to create the correct relative path. All Remix is doing is passing these paths to chokidar to trigger a rebuild when a file is changed.

[kevinswarner]

Thanks. I just wanted to report the bug in the documentation.

[kevinswarner]

@jsbmg No, I have not been able to get it to work. I am using Turborepo and have a dependent package that I want to watch, and have Remix pick up the change. When I make a change in the package, the package rebuilds correctly (it is a Typescript package), and I even see Remix detecting the change in the correct path, but, for some reason Remix will not reflect the change. Here is an example of the console output when I make a change to the package I am "watching" in watchPaths.

 💿 File changed: ../../node_modules/models/dist/appointment.js
[1] 💿 File changed: ../../node_modules/models/dist/appointment.d.ts
[1] 💿 Rebuilding...
[1] 💿 Rebuilt in 122ms

But, when I visit the page where I use the package, it does not reflect the change I made in the package.

Note, if I stop the Remix dev environment, and start it again, it does indeed pick up the change.

My package json scripts look like this...

"dev": "concurrently \"npm run dev:css\" \"remix dev\"",
"dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",

I have a tailwind build step I run before I run remix dev.

I sure wish I could find an answer, but for now I luckily am not changing my dependent package that often, so when I do, I manually stop and start the Remix dev process.

[jsbmg]

@kevinswarner I deleted my comment above after realizing it wasn't working because I was using an Express server. Looks like your case is different though because you are using Remix Serve...

[kiliman]

As I stated in my comment about TurboRepo #4531, watchPaths is meant to trigger a Remix rebuild.

The web server (whether Remix App Server or Express) only purges the request cache from the BUILD folder (which is code from /app). It does not purge modules from node_modules

Since RAS will purge the cache after every request, changes to app code will automatically be reflected.

However, in order for RAS or Express to pickup changes to node_modules, you'll need to restart them, which is outside the scope of watchPaths.

[machour]

Just to clear things up: watchPaths can be either a string, an array of string, or an async function returning a string or an array of string.

See https://github.com/remix-run/remix/blob/main/packages/remix-dev/config.ts#L447

We still need to fix the export and mention that paths are supposed to be relative. I'll merge #4578 as soon as it is updated.