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

**URL:** https://discourse.roots.io/t/help-sage-theme-development-webpack-hot-reload-infinite-loop/17129
**Category:** sage
**Tags:** webpack
**Created:** 2019-11-21T14:30:00Z
**Posts:** 15

## Post 1 by @adapt.patrick — 2019-11-21T14:30:01Z

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

---

## Post 2 by @mattchaptr — 2019-11-21T14:58:50Z

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

---

## Post 3 by @JordanC26 — 2019-11-21T15:08:49Z

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.

- [Port remains open after terminating yarn run start](https://discourse.roots.io/t/port-remains-open-after-terminating-yarn-run-start/16002)

---

## Post 4 by @adapt.patrick — 2019-11-21T15:22:58Z

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](http://localhost/bespoke-it)”,  
“proxyUrl”: “[http://localhost:3000](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

---

## Post 5 by @JordanC26 — 2019-11-21T15:54:14Z

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

---

## Post 6 by @JordanC26 — 2019-11-21T15:58:22Z

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

---

## Post 7 by @adapt.patrick — 2019-11-21T16:07:52Z

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

---

## Post 8 by @adapt.patrick — 2019-11-21T17:00:25Z

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

---

## Post 9 by @mattchaptr — 2019-11-21T18:55:18Z

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](http://jhg.test)”,  
“proxyUrl”: “[http://localhost:3000](http://localhost:3000)”,  
“cacheBusting”: “[name]\_[hash:8]”,  
“watch”: [“app/ **/\*.php", "config/** /_.php", "resources/views/\*\*/_.php”]  
}

---

## Post 10 by @mattchaptr — 2019-11-21T21:17:44Z

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 '}'
```

---

## Post 11 by @alwaysblank — 2019-11-21T21:58:25Z

> [@mattchaptr](#):
>
> ```
> /styles/main.scss:8:3: missing '}'
> ```

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

---

## Post 12 by @mattchaptr — 2019-11-22T09:48:43Z

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!

---

## Post 13 by @JordanC26 — 2019-11-22T16:23:18Z

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.

---

## Post 14 by @mattchaptr — 2019-11-22T18:07:17Z

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';
```

---

## Post 15 by @system — 2020-01-02T14:30:03Z

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