Sage 9 - js on save doesn't update

sage
,
#1

Hi,

whenever I save a JS file of my theme after running yarn start, the app compiles properly but the console throws a few errors and JS is not injected.

[HMR] Update check failed: Error: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL in process-update.js:136

Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
    at http://localhost:3000/ottobock-git/wp-content/themes/mytheme/dist/scripts/main.js:30:22

I’ve tried all the suggestions in the forums, without any luck.

Here’s my config.json

{
“headers”: { “Access-Control-Allow-Origin”: “" },
“entry”: {
“main”: [
“./scripts/main.js”,
“./styles/main.scss”
],
“customizer”: [
“./scripts/customizer.js”
]
},
“publicPath”: “wp-content/themes/mytheme/”,
“devUrl”: “http://localhost/project-git”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [
"app/**/.php”,
“config//*.php",
"resources/views//*.php”
]
}

am i missing out something really obvious?

#2

Hey did you ever figure this out? Experiencing a similar issue right now.

#3

I’m getting the same error and same issue - I didn’t experience this when I built a site using Sage 9.0.7.

I’m using Trellis, Bedrock and Sage and can’t use yarn start to develop.

#4

I think it’s something to do with the urls used in the config.json.

I managed to fix this issue by changing my URLS to below however now whenever I make a change to a JS file browsersync constantly refreshes. And I get this error -

14
142500×228 108 KB

Seems to happen only on dev URLs with a subfolder (i.e. multisite sub-sites). I’ve tried playing the forward slashes on the publich path and the dev URL but no luck.

{
  "entry": {
    "main": ["./scripts/main.js", "./styles/main.scss"],
    "customizer": ["./scripts/customizer.js"]
  },
  "publicPath": "/wp-content/themes/sagetheme",
  "devUrl": "multisite.test/test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": ["app/**/*.php", "config/**/*.php", "resources/views/**/*.php"]
}
Browsersync not syncing
#5

Ok I don’t know why but changing the proxyURL to include the subfolder fixed this…

{
  "entry": {
    "main": ["./scripts/main.js", "./styles/main.scss"],
    "customizer": ["./scripts/customizer.js"]
  },
  "publicPath": "/wp-content/themes/sagetheme",
  "devUrl": "multisite.test/test",
  "proxyUrl": "http://localhost:3000/test",
  "cacheBusting": "[name]_[hash:8]",
  "watch": ["app/**/*.php", "config/**/*.php", "resources/views/**/*.php"]
}
#6

in my case, it was indeed the config.json setup.
the following did the trick:

 "publicPath": "/projectname/wp-content/themes/themename",
  "devUrl": "http://localhost/projectname",
  "proxyUrl": "http://localhost:3000",

I hope it helps

2 Likes
#7

I’m using Bedrock so I have “publicPath”: “/app/themes/themename”, however in your first post you’re missing the first / eg “publicPath”: “wp-content/themes/mytheme/”, but notice you have fixed that in your latest post. I saw this as I missed the first / as well…