Sage: Watch issues

[ivantipov]

Submit a feature request or bug report

• [x] I've read the guidelines for Contributing to Roots Projects
• [ ] This is a feature request
• [x] This is a bug report
• [x] This request isn't a duplicate of an existing issue
• [x] I've read the docs and NPM Debugging Guidelines post and followed them (if applicable)
• [x] This is not a personal support request that should be posted on the Roots Discourse forums

Replace any X with your information.

---

What is the current behavior?

2 annoying issues with the current watch behaviour:

1. When working on a bunch of edits in a SASS file and reloading the page it will iterate through all CSS changes on screen since the latest yarn start. To prevent this, I have to periodically restart yarn.
2. When changing a JS file under the watch command it will get stuck in a loop reloading the page unless I stop and restart the server, producing this error in the console:

process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:81 [HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details.

What is the expected or desired behavior?

1. Only the latest version of the CSS file will be shown on a page refresh immediately
2. JS changes are updated and injected

---

Bug report

(delete this section if not applicable)

Please provide steps to reproduce, including full log output:

Above steps pretty clear, after the yarn run start command

Please describe your local environment:

WordPress version: latest/4.7.2

OS: latest/10.12.3

NPM/Node version: 3.10.1/6.9.4

Where did the bug happen? Development or remote servers?

Development

Is there a related Discourse thread or were any utilized (please link them)?

No

[jmreid]

I'm having the exact same issue, with the same software versions. I have to stop Yarn, then start it again with yarn start to stop the reload loop.

If I edit a js file, it causes the loop to start all over.

[sftsk]

having the same issue here!

[peiche]

Same issue here.

[QWp6t]

Have you tried using the master branch?

I'm using the master branch and I'm not able to reproduce this behavior.

[joaovpmamede]

Did you by any chance changed the theme folder name?
What happened with me is that I wasn't using sage as my theme name and I forgot to change it
on config.json

[jmreid]

I have changed mine, but I've updated it to be "publicPath": "/web/app/themes/themename" and I still have the infinite loop issue.
(I'm also using Bedrock)

[retlehs]

/web/ shouldn't be in that path, that's your document root. it's not part of the public URL structure

[jmreid]

You're right. I've removed /web/ so it now reads "publicPath": "/app/themes/themename"

Now it doesn't get into an infinite loop. Instead I get one notice in the console that the .js file doesn't know how to hot reload itself, and it needs to do a full refresh. But it does that one refresh and works fine.

What do they call this, an "I - D - Ten - T" error? Thanks for the help!

[QWp6t]

I'm closing this since I was unable to reproduce and it sounds like it's probably just a misconfiguration issue. Go into config.json and confirm that the publicPath is correct. If you're still having this issue, feel free to link me to a repo that has the problem or provide me with steps to reproduce and I'll reopen this issue.

[nicooprat]

Updating Node fixed it for me: Node.js >= 6.9.x (https://github.com/roots/docs/blob/sage-9/sage/theme-installation.md)

[ivantipov]

Hang on, I'm on the other side of the world:) This is indeed a configuration issue, #1 appears to have been fixed as well. Thanks.

[a-axton]

I was having this issue as well, fixed it by removing a trailing slash in publicPath

[Symro]

Same thing for me, it was only a publicPath issue thanks !

[webberwang]

Glad I found this solution