Yarn dev compiles but doesn't watch

sage
,
1

I have a fresh install of Sage 10 per the Docs. I’m trying to wrap my head around the workflow.

When I run yarn dev, I get no errors and although it takes a couple of minutes to compile, it reports “watching project sources (and 25 other files)”. Am I correct that browser-sync should be running at this point? When I make changes to any of the template files in resources, my browser is not refreshed.

When yarn dev is (supposedly) running, if I change a CSS class, in page.blade.php, for example, to some standard tailwind.css class that wasn’t present during compile, the displayed styling will return to default (black text or white background), even if that class exists in the app.xxxxx.css file in public/css. When I stop and then re-start yarn dev, the new classes are updated.

I’m coming from a standard Sass/Gulp environment, so I might just be missing something obvious in how Tailwind works.

2

Where are those source files? WSL? Mac OS? Linux? In a VM? This is relevant, as crossing different file systems can cause issues with watching file changes.

3

CSS files aren’t generated during development (those files are leftover from your production builds).

Any style changes are injected into the DOM in public/js/app.js. You can look for the comment block that marks the beginning of this injection code:

/***/ "./styles/app.css":
/*!************************!*\
  !*** ./styles/app.css ***!
  \************************/

I think @strarsis is going to be helpful here as per the file watch behavior.

4

I’m running WSL on Windows 10.

5

Does anyone have any ideas where I might look to toubleshoot this issue?
I’m running WSL from the mounted root of the theme directory. When I run yarn dev, this is my output:

◉ sage ./public [eff4e2e47851a5f2069e]
│
├─ entrypoints
│ ├─ app
│ │ ├─ js/runtime.js 46.81 kB
│ │ └─ js/app.js 42.01 kB
│ └─ editor
│ ├─ js/runtime.js 46.81 kB
│ └─ js/editor.js 27.26 kB
│
│
└─ compiled 44 modules in 36s 808ms

:information_source: server
╷
├─ proxy: http://teal.local (​http://teal.local​)
├─ internal: http://localhost:3000 (​http://localhost:3000​)
└─ external: http://192.168.195.80:3000 (​http://192.168.195.80:3000​)

… watching project sources (and 25 other files)

My file edits in resources/views do not update unless I run yarn dev or build again.

Thanks. I’m pretty excited about getting this stack running.

6

I’m guessing this is related to file watch on a mounted volume in WSL 1 – which seems kind of broken, to me.

I would probably upgrade to WSL2 which doesn’t seem to suffer this. But, in the context of WSL1 you can turn on polling to strong arm changes changes into being recognized:

export default async bud => {
  bud.hooks.on(`dev.watch.options`, (options = {}) => ({
    ...options,
    usePolling: true,
  }))
}

Depending on the number of files being watched it can start to overwhelm container resources, so you may need to adjust the polling interval as you go (expressed in ms):

export default async bud => {
  bud.hooks.on(`dev.watch.options`, (options = {}) => ({
    ...options,
    usePolling: true,
    interval: 1000,
  }))
}

Related:

1 Like
7

Thanks, I’m actually running WSL2.

8

Still might want to try playing with the watch settings. Especially if you are editing files from the host (rather than in the container).

I don’t know that much about it as I only use Windows to play games on but maybe this post from @strarsis might be helpful?

There is more information on the Discourse that is relevant to your problem if you search. I hope you get it sorted; sorry I can’t be more help.

1 Like