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?
Hey did you ever figure this out? Experiencing a similar issue right now.
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.
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 -
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"]
}
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"]
}
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
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…