Loop reloading after change JS with yarn start | Sage 9

sage9

#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

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


#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",

#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/


#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”


#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"
  ]
}