Sage 9 - [HMR] Cannot find update (Full reload needed)

sage
1

Hello,

I have a issue when I run yarn start, the page reloads indefinitely 9 times out of 10.
I have already read several topics on this subject, but I’m not able to fix it. All I can do is spamming yarn start.

Can you help me to fix this issue please? This is really boring and takes away the desire to work on my project…

About my PC config:

About my MAMP config:

  • Port Apach: 80
  • Port Nginx: 80
  • Port MySQL: 3306
  • PHP: 7.4.1
  • Cache: off
  • Webserver: Apache
  • Document Root: C:\MAMP\htdocs
  • URL of my project: http://localhost/Omega/

About my WordPress installation:

  • Windows folder: C:\MAMP\htdocs\Omega
  • Ubuntu folder: max@P:/mnt/c/MAMP/htdocs/Omega/wp-content/themes/omega$
  • I use Sage as WordPress starter theme (renamed omega)
  • I dont use Bedrock neither Trellis
  • I have the latest version of WordPress

About yarn start

  • It does compile properly my SASS and my JS files.

I think that the problem comes from Browsersync because my pages keep reloading indefinitely after each changes I made in my SASS or JS files. Sometimes, everything run smoothly, but I don’t know why…

What is displayed on the screen when I type yarn start:

max@PC:/mnt/c/MAMP/htdocs/Omega/wp-content/themes/omega$ yarn start
yarn run v1.22.4
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files…

DONE Compiled successfully in 754ms

[BS] [HTML Injector] Running…
[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:

   Local: http://localhost:3002/Omega
External: http://192.168.0.11:3002/Omega

      UI: http://localhost:3001

UI External: http://192.168.0.11:3001

[Browsersync] Watching files…

DONE Compiled successfully in 674ms

Then the browsers opens http://localhost:3002/Omega/

When I modify a file

WAIT Compiling…

DONE Compiled successfully in 986ms

Then each opened page reloads indefinitely 9 times out of 10.

What is displayed in my console.log on Chrome

Navigated to http://localhost:3002/Omega/
(index):15 GET http://localhost:3002/Omega/wp-content/themes/omega/dist/styles/main.css net::ERR_ABORTED 404 (Not Found)
VM10762 main.js:2083 Ignored an update to unaccepted module 23 → 18 → 17
VM10762 main.js:2156 [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 https://webpack.js.org/concepts/hot-module-replacement/ for more details.
VM10762 main.js:2164 [HMR] - ./resources/assets/scripts/routes/common.js
VM10762 main.js:2203 [HMR] Reloading page
VM10762 main.js:2083 Ignored an update to unaccepted module 23 → 18 → 17
VM10762 main.js:2156 [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 https://webpack.js.org/concepts/hot-module-replacement/ for more details.
VM10762 main.js:2164 [HMR] - ./resources/assets/scripts/routes/common.js
Navigated to http://localhost:3002/Omega/

The config files
wp-content\themes\omega\package.json:
https://pastebin.com/xQ6UvCdd

wp-content\themes\omega\resources\assets\build\config.js:
https://pastebin.com/wCKLvuk7

wp-content\themes\omega\resources\assets\build\webpack.config.js:
https://pastebin.com/4ScmxvF2

wp-content\themes\omega\resources\assets\config.json
https://pastebin.com/vah1GbFe

Topics I have already read:
https://github.com/roots/sage/issues/1790
https://github.com/webpack-contrib/webpack-hot-middleware/issues/135
https://discourse.roots.io/t/sage-9-js-doesnt-update-on-reload/8474/9
https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/34
https://discourse.roots.io/t/loop-reloading-after-change-js-with-yarn-start-sage-9/9349/7
…

Can you help me to fix it please? Tell me the information you need…

Thanks

2

Any help? I’m still stuck on it, I cant work on my project…

3

Don’t know if these are causing the problem, but I see one issue and one potential issue:

  1. "publicPath": "/wp-content/themes/omega",`

    If your URL is localhost/Omega then this isn’t actually your public path: The public path is the path from the root so it would be

    "publicPath": "/Omega/wp-content/themes/omega",

  2. You’re serving your site via localhost and then attempting to also proxy it on localhost. Usually you want to serve your site on some kind of domain, i.e. omega.local. That could be causing an issue?

4

Hi alwaysblank,

Thanks for your help.

When I run MAMP, my website is accessible through http://localhost/Omega.
But when I run yarn start from my project in PHPStorm, it automatically opens a new tab to http://localhost:3000/Omega

Both urls work but I do not know if this is an issue to have 2 urls? Obviously, only the url http://localhost:3000/Omega is automatically refreshed when I change SASS or JS files.

I have tried your suggestion:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "Omega/wp-content/themes/omega",
  "devUrl": "http://localhost/Omega",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ],
  "enabled": {
    "browserSync": false
  }
}

But this change breaks browsersync. The page is not refreshed anymore and the console displays an error. As you can see here: https://ibb.co/PzjQmgh

5

This is the worst issue I have ever seen.
I can even not work on my project. I waste 2 hours to make ridiculous colour changes.

At this rate, I may finish my project in 10 years. Maybe I’ll be dead before.

1 Like
6

This topic was automatically closed after 42 days. New replies are no longer allowed.