[Help!] Sage Theme Development - WebPack Hot Reload Infinite Loop

sage
1

Hi,

We’re working on building a new theme using the Sage starter theme/framework and all is going well. However, we have a major inconvenience when attempting to make any changes to Javascript files. When any JS files are changed within the theme, WebPack seems to trigger an infinitely looping hot reload of the page. This causes us to have to kill the WebPack process + restart it with yarn start for every change made to JS.

We have spent a substantial amount of time researching what could be causing this but have not been able to find anything which works.

For clarity, we have a standard Wordpress install, running on MAMP with Sage as our development theme of choice.

Many thanks,
Patrick

1 Like
2

I’m experiencing this too. rm -rf node_modules and yarn usually sorts it out, but it is annoying!

3

Hi Adapt,

Could you post your theme/resources/assets/config.json file contents?

This may be happening because the port isn’t closed maybe? When you re-run yarn start do you keep getting a new port? :3000, 3002 etc.

4

Hey Jordan,

Thanks for getting back to me.

Here’s the contents of my config.json:
{
“entry”: {
“main”: [
“./scripts/main.js”,
“./styles/main.scss”
],
“customizer”: [
“./scripts/customizer.js”
]
},
“publicPath”: “/wp-content/themes/bespoke-it”,
“devUrl”: “http://localhost/bespoke-it”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [
“app//*.php",
"config//.php",
"resources/views/**/.php”
]
}

It would seem the port remains the same with each launch of yarn start.

Thanks,
Patrick

5

Your devUrl should not be localhost, as per the docs:

Browsersync configuration

Update devUrl at the bottom of resources/assets/config.json to reflect your local development hostname.

For example, if your local development URL is https://project-name.test you would update the file to read:

"devUrl": "https://project-name.test",
6

Copy the domain on the canonical line here (in your file(s)) to your devUrl
/trellis/group_vars/development/wordpress_sites.yml

wordpress_sites:
  example.co.uk:
    site_hosts:
      - canonical: dev.example.co.uk

"devUrl": "https://dev.example.co.uk",

7

Hi @JordanC26,

Thanks again for your response, however as I outlined in my initial message, I’m not using a local dev hostname. Do I need to create one in my /etc/hosts file?

I’m also not using Trellis or Bedrock; just a standard WP install (as I had great difficulty getting either of those to play nicely either, but that’s for another time…).

Are you suggesting the issue may be caused by our devUrl still referencing “localhost”? Is that what is causing the infinite loop?

Thanks,
Patrick

8

Hey @JordanC26,

I’m very pleased to report the use of a VirtualHost domain appears to have done the trick! We can now freely make changes to all files within the theme without causing any infinite loops!

Thank you very much for your help - what a bizarre and highly under documented problem.

Best wishes,
Patrick

1 Like
9

HI guys,

I’m getting the same. Can you help?

{
“entry”: {
“main”: ["./scripts/main.js", “./styles/main.scss”],
“customizer”: ["./scripts/customizer.js"]
},
“publicPath”: “/app/themes/john-hansard-gallery”,
“devUrl”: “http://jhg.test”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [“app//*.php", "config//.php", "resources/views/**/.php”]
}

10

I seem to be getting the following error:

resolve-url-loader cannot operate: CSS error:

(Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
  /Applications/MAMP/htdocs/jhg.art/web/app/themes/jonh-hansard-gallery/resources/assets/styles/main.scss:8:3: missing '}'
11

It looks like line 8 of your main.scss file is missing a closing bracket.

12

Yeah, I thought that too - however it isn’t. That is just a standard main.scss file which is used for importing all my components. I’m also getting a hot reload infinite loop on js changes now too. I have to kill the server and restart every time. Really odd!

13

Can you post the contents of your main.scss file anyway? Just checked my main.scss file, I have no } in use, wondering how you’re file is setup.

14

Hi Jordan,

Sure - you can see below:

@import 'common/variables';

@import './autoload/**/*';

@import '~tailwindcss/base';

@import '~tailwindcss/components';

@import '~tailwindcss/utilities';

@import 'common/global';

@import 'components/typography';

@import 'components/buttons';

@import 'components/comments';

@import 'components/forms';

@import 'components/wp-classes';

@import 'layouts/header';

@import 'layouts/sidebar';

@import 'layouts/footer';

@import 'layouts/home';

@import 'layouts/pages';

@import 'layouts/posts';

@import 'layouts/tinymce';
15

This topic was automatically closed after 42 days. New replies are no longer allowed.