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
9

I am experiencing this same issue on a new MacBook M2 chip machine.
Sometimes the code will inject and refresh and sometimes it won’t.

It’s to the point now where every time I make a change to a blade file, it does not inject and if I refresh the page manually, I get the runtime.js error:

file_get_contents(/srv/www/coloradoshadesystems.com/current/web/app/themes/coloradoshadesystems/public/js/runtime.js): Failed to open stream: No such file or directory

Once I run yarn bud build and refresh, it’s all good until I make a new change and refresh again.

10

Upon further investigation, if I stop watching the dev url, make changes and just refresh the proxy url manually, then I do not see the runtime.js error but of course, it gets old having to refresh all the time manually.

Any help to get this fixed would be spectacular.

11

So two days ago I ended up changing the port from :3000 to :3333, running yarn dev and I was off to the races. Everything appeared to be working well :man_shrugging:

Once in a while, it would run into the runtime error, close out my dev connection, restart and be good for a while again.

This morning, I was working on getting some tools setup (ACF Pro, ACF Composer) and begin to build out some blocks, when suddenly I am getting the runtime error on every save again. Injecting / reloading was not working, so I did it manually.

Once I changed the port again, from :3333 to :4444, all is well now, once again, for now anyways…

Not sure how to describe this any better… but if I am able to change the port around and continue working for a few days at a time before I need to change it again, that’s fine. Better than before.

***EDIT

Nevermind, spoke too soon. It’s throwing the runtime.js error after every save. I’ve changed the port a few different times now and its not helping.

Seems to have went back to bad after installing the the tools mentioned on my last post.