Loop reloading after change JS with yarn start | Sage 9

sage
1

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:

Console error

error.JPG1905×427 102 KB

My config.json

{
    "entry": {
        "main": [
            "./scripts/main.js",
            "./styles/main.scss"
        ],
        "customizer": [
            "./scripts/customizer.js"
        ]
    },
    "publicPath": "/arnoud_oostveen/wp-content/themes/arnoud_oostveen",
    "devUrl": "http://localhost/arnoud_oostveen/",
    "proxyUrl": "http://localhost:3000",
    "cacheBusting": "[name]_[hash:8]",
    "watch": [
        "{src,templates}/**/*.php"
    ],
    "browsers": [ 
        "last 2 versions",
        "android 4",
        "opera 12"
    ]
}

local environment:
WordPress version: latest/4.7.2
Windows 10
NPM/Node version: 4.0.5/6.9.1

3 Likes
2

I have the same problem.
Loop reloading browser window is very annoying. Does anyone have a solution for this?
In my common.js file there are few features that do not show errors :frowning:

3

ive solved this issue by changing the theme name to a different name which is not equal to my website name from:

   "publicPath": "/arnoud_oostveen/wp-content/themes/arnoud_oostveen",
   "devUrl": "http://localhost/arnoud_oostveen/",

to:

"publicPath": "/arnoud_oostveen/wp-content/themes/ao",
"devUrl": "http://localhost/arnoud_oostveen",
1 Like
4

Are you sure it was the theme name change? Your first devUrl has a trailing / at the end.

5

My issue was actually that I had the wrong publicPath set. It seemed to work with and without the trailing slash on the devUrl. I’m all good now. :slight_smile:

6

I have the same problem.
But it starts after I added a component by npm.
So I removed it but it’s still looping.
Then I check my publicPath and devUrl, trying different solutions but nothing.
It’s really annoying.

my config.json is:
{
“entry”: {
“main”: [
"./scripts/main.js",
"./styles/main.scss"
],
“customizer”: [
"./scripts/customizer.js"
]
},
“watch”: [
“templates//*.php",
"src//*.php”
],
“publicPath”: “app/themes/birdlife”,
“devUrl”: “http://birdlife.com”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“browsers”: [
“last 2 versions”,
“android 4”,
“opera 12”
]
}

Thanks

7

That could also be possible. I did not pay attention to this :sweat_smile:

8

How did you end up with this? :slight_smile:

See https://github.com/roots/sage/blob/b11cb99d64987b44e9e90341dfd05a77de6b98cf/resources/assets/config.json#L11

Try /app/ instead of app/

1 Like
9

How does this work on MAMP, what should I set my ‘publicPath’ to?
It’s really annoying, can’t get it to work what ever I change it to.

{
	"entry": {
		"main": [
			"./scripts/main.js",
			"./styles/main.scss"
		],
		"admin": [
			"./scripts/admin.js",
			"./styles/admin.scss"
		]
	},
	"watch": [
        "{inc,templates}/**/*.php"
    ],
	"publicPath": "/wp-content/themes/theme-name",
	"devUrl": "http://wp.dev/theme-name",
	"proxyUrl": "http://localhost:3000",
	"cacheBusting": "[name]_[hash:8]",
	"browsers": [
		"last 3 versions",
		"android 4",
		"opera 12",
		"safari 8"
	]
}
10

Mhm, I just can’t get this thing to work properly:

[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. @ process-update.js:81
[HMR]  - ./assets/scripts/main.js  @ process-update.js:89
[HMR] Reloading page process-update.js:128

I’m using this with MAMP and WP Multisite.
Working anything with JS is unusable, JS doesn’t build and page is infinitely reloading.

None of the tweaks mentioned in couple of threads on this forum don’t fix the issue.

11

do you have your wp in subdirectory? If so, your publicPath should be “/subdirectory/wp-content/themes/theme-name”

5 Likes
12

I have same issue, is my setting right?

Also what type of local development tool do you guys use for devepling the Sage 9, and you don’t see this issue? I think it became a common issue now with MAMP~~

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/sage-9.0-theme",
  "devUrl": "http://localhost:8888/_auto-build-templates/wordpress-automation",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
13

Has anyone seen any way to resolve this? I used Sage 8 for everything but Sage 9, months after release, still gives me fits with stuff like this. I have to hack my way around to get this to not go into an autoreload loop and it’s to the point that I can’t even continue working on the site.

My config file (and yes, the settings are correct… this works 90% of the time):

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/client-portal",
  "devUrl": "http://yesler-client-portal.local",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
14

@builtbyvern I just had the same problem and I seems like I solved it by changing publicPath from /myMultisite/wp-content/themes/sage to /myMultisite/mySite/wp-content/themes/sage

In other words, the path is includes my subsite, not the parent site.

15

If you’re using Multisite and the reloading happens on a subsite, you can try what I described in another post and what solved it for me: Webpack on Multisite with subdomains continues reloading for JS changes

But of cause go sure that your config paths are set correctly.

16

hey,

I am also having this issue with Sage 9, after adding hamburger.js, while using MAMP and virtual hosts. I have the following config.json -

{
“entry”: {
“main”: [
“./scripts/main.js”,
“./styles/main.scss”
],
“customizer”: [
“./scripts/customizer.js”
]
},
“publicPath”: “/wp-content/themes/newromans”,
“devUrl”: “http://new.romans”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [
“app//*.php",
"config//.php",
"resources/views/**/.php”
]
}

My public path was original the full path from my mac hard drive, so /Users/me/projName/wp-content/…

Any ideas? It’s making my mac fan go bananas and constantly reloading.

18

If you are using Bedrock with Sage it should be like “/app/themes/newromans”; I had similar constant reload issue whenever i updated a file and it all came down to a typo in my path.

1 Like
19

Hi @builtbyvern i am having the same configuration but my website wont even load. I would really appreciate your assistance. thanks.

20

For those having this issue with website in subdomain using mamp This is THE SOLUTION !!!

21

“proxyUrl” should has the same subdirectories structure as “devUrl”:

"proxyUrl": "http://localhost:3000/_auto-build-templates/wordpress-automation"

1 Like