Image save causes ERR_CONNECTION_REFUSED

sage
1

I’ve a bit of a weird with browsersync when I save an image. If I’ve run ‘yarn start’ and then overwrite an existing image saving to /resources/assets/images/ I get the following errors in my dev tools:

Failed to load resource: net::ERR_CONNECTION_REFUSED :3000/browser-sync/socket.io/?EIO=3&transport=polling&t=MQ2pIlO:1

This results in the CSS no longer being applied, I just see unstyled html.

Under the network section I can see there’s a GET request to __webpack_hmr that’s failing. The headers are…

Request URL: http://localhost:3000/__webpack_hmr
Referrer Policy: no-referrer-when-downgrade

Provisional headers are shown
Accept: text/event-stream

Cache-Control: no-cache

Referer: http://localhost:3000/here-is/a-path/workspace-page.html

I’m totally stumped… anyone have any ideas as to what might be going on??

Thanks!

2

Hi @Ojay - Can you share your config.json file and an example of where in your code you are loading the image?

3

There’s not too much going on in the config.json…

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/redbrick/wireframes",
  "devUrl": "http://localhost:8888",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

Where the image is being referenced, either from my scss or inline, doesn’t seem to make much difference. It’s more to do with when an image is saved to /resources/assets/images/ whilst yarn start is running. It doesn’t matter if the image I’m saving is referenced at all in fact, it’ll still crash yarn so that the css is no longer applied.

Thanks for getting back to me.

4

Your public path needs to be the path to the theme directory

5

Sorry, I forgot to mention, I’ve set this up outside of WordPress… the sage theme is unchanged bar I’ve added static html files (wireframes). I’m developing these wireframes at /redbrick/wireframes and then when I’m ready I’ll port everything to WordPress.

6

:confused: We can’t help you with an unsupported setup over here. Definitely recommend just working within WP from the start if that’s where it’s going to end up.

1 Like