# First time using Sage and main.js is not compiling when files change

**URL:** https://discourse.roots.io/t/first-time-using-sage-and-main-js-is-not-compiling-when-files-change/12171
**Category:** sage
**Tags:** sage9
**Created:** 2018-04-11T04:59:47Z
**Posts:** 21

## Post 1 by @aolin480 — 2018-04-11T04:59:47Z

This is the first time using this theme. I think the concept is great, but whenever I make code additions to resources/assets/scripts/routes/home.js, dist/scripts/main.js does not compile. I have to go back to terminal, stop the yarn process, and run `yarn run start` again. THEN it compiles. This cannot be the correct behavior, right?

---

## Post 2 by @evance — 2018-04-11T09:01:00Z

> This cannot be the correct behavior, right?

Nope. It is when you add new files, it needs a new build then in order to recognize changes but that shouldn’t be happening on existing files / directives.

Does the (S)CSS work fine? Any errors / console statements? Are all of [Sage’s dependencies](https://roots.io/sage/docs/theme-installation/) up to date?

---

## Post 3 by @Martin_Kucera — 2018-04-11T09:29:28Z

Hi,

do you have right theme folder in config.json? Could you send us your config?

Martin.

---

## Post 4 by @aolin480 — 2018-04-11T17:49:35Z

Here is my config.json file. SCSS doesn’t compile at, and even when I start `yarn run start` it doesn’t create a `dist/styles/main.css` file either, but it DOES create a `dist/scripts/main.js` file, but only when running `yarn run start` not when files have been modified while webpack is running. My test Sage theme is located in `wp-content/app/themes/sage` but before putting it in the app folder, which I never have really done with wordpress themes before, the same issue is happening when I installed sage into `wp-content/themes/sage`

```
{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/sage",
  "devUrl": "http://www.sagetest.local",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
```

---

## Post 5 by @aolin480 — 2018-04-11T17:51:29Z

Also, whenever I make a change to the main.js file, it does say it compiled, but the main.js file does not update. However, i do see my change in one of the json files in the .cache-loader folder too

---

## Post 6 by @aolin480 — 2018-04-11T17:53:15Z

All of my tests have been run just by doing `composer create-project roots/sage sage dev-master` so I assume it’s up to date? I have `node 9.11.1` and `npm 5.6.0` installed too, if that helps.

---

## Post 7 by @aolin480 — 2018-04-11T19:26:10Z

Sorry, first time using discourse :smiley: See my reply above

---

## Post 8 by @aolin480 — 2018-04-11T19:27:12Z

Yes, they are all up to date, and I am using the `composer create-project roots/sage sage dev-master` command to download and set up the theme

---

## Post 9 by @Martin_Kucera — 2018-04-12T08:31:13Z

Hi, move Sage theme to **/wp-content/themes/sage** then change “publicPath” in your config to **/wp-content/themes/sage** , delete .cache-loader forlder and dist folder (if exist) and after this steps try **yarn run start** if it works.

---

## Post 10 by @evance — 2018-04-12T09:51:18Z

> [@aolin480](#):
>
> SCSS doesn’t compile at […]

So your `main.css` is not being compiled correctly? If so then you should inspect that, seems to be a more general issue. Any errors being thrown?

> Also, whenever I make a change to the main.js file, it does say it compiled, but the main.js file does not update. However, i do see my change in one of the json files in the .cache-loader folder too

If I’m not mistaken then the changes you make are virtually injected into the file and thus you won’t see the actual file changing until you re-build.

Please run a test with a simple `console.log` or whatever and see if the new code is being injected & executed. If so then I don’t know why you would be worried…

---

## Post 11 by @aolin480 — 2018-04-12T14:11:28Z

@Martin_Kucera I did what you said, but nothing. I also tried deleting the .cache-loader folder while yarn/webpack was running and tried adding code to resources/assets/scripts/routes/home.js as well as resources/assets/scripts/main.js, but that didn’t work. I also removed the dist folder while yarn was running too and retried adding new code to the .JS files, but that didn’t work either.

---

## Post 12 by @aolin480 — 2018-04-12T14:26:07Z

I also just downgraded my node to 8.11.1 to make sure that wasn’t it. re-ran `yarn` and did `yarn run start` but still no dice

---

## Post 13 by @aolin480 — 2018-04-12T14:54:23Z

Another weird thing is I don’t even see this being used in webpack, not sure if that’s an issue, but. Just trying to rubber duck as much as I can.

 ![image](https://discourse.roots.io/uploads/default/original/2X/f/ffe067a0d88706ff5ff0aa2d445b77fb19c28685.png)

---

## Post 14 by @aolin480 — 2018-04-12T18:34:35Z

@evance Yeah, none of it compiles while yarn is running. I am checking the dist folder after adding simple code. If I add bad CSS to the SCSS file, I _do_ get errors saying it’s malformed, but once i fix the error, the main.css still doesn’t compile. I am used to using gulp on a handful of projects, so whenever I make changes to custom JS or SCSS files, they get processed / minified / stored into a specific folder I configured in the gulp file. Sage however, is not using that workflow. The assets only get compiled when I run `yarn run start`. So if I make a change to any asset that’s supposed to get compiled. I need to halt yarn, and do `yarn run start` to compile it.

---

## Post 15 by @aolin480 — 2018-04-12T18:46:29Z

Here’s an example video of the issue I am having:

---

## Post 16 by @evance — 2018-04-12T18:59:07Z

> Please run a test with a simple console\_log or whatever and see if the new code is being injected & executed. If so then I don’t know why you would be worried…

Did you do this? In simple steps:

- `yarn run start`
- edit `common.js` and introduce a simple `console.log`, `onClick` or similar
- check the output (force a re-load if necessary)

> I am checking the dist folder after adding simple code.

Pretty sure that **you won’t see any actual file edits** so it’s pointless to check. The code is injected and only changes upon a new build.

---

## Post 17 by @aolin480 — 2018-04-13T14:56:06Z

@evance Still no dice. I did both a `console.log` and an `alert` in `resources/assets/scripts/routes/common.js` and `resources/assets/scripts/main.js`, and I don’t see anything popping up or getting written out in console. Even though webpack says it compiled. I think halt webpack/yarn, and do `yarn run start` again, then _THEN_ the console.log and alert works.

I also didn’t use `dev-master` to build the theme this time, I used the stable version.

I am going to try it on my mac mini to see if that works, since that environment is different in a certain sense. Not much is installed as far as webdev libs

---

## Post 18 by @aolin480 — 2018-04-13T15:23:52Z

I just tried to compile the main.js on an entirely different machine (mac mini) with a fresh install of composer, and yarn, but that still doesn’t compile down while webpack is running after making a change to common.js or main.js. I am at a loss here.

---

## Post 19 by @evance — 2018-04-14T07:12:41Z

OK, I can confirm that the JS doesn’t inject properly with my current setup as well…

Unfortunately all I can do is to direct you to [this thread](https://discourse.roots.io/t/sage-9-browsersync-not-loading-any-css-at-all-on-yarn-run-start/11332) which may or may not have additional info on the issue.

Can somebody else chip in? Any thoughts?

---

## Post 20 by @aolin480 — 2018-04-16T03:41:27Z

@evance @Martin_Kucera Great news. I have it working now. I tried the whole installation process again tonight, and I noticed that in the README.md file, they changed the command to start webpack. It’s now `yarn start` instead of `yarn run start`. I can now confirm that styles and scripts are now being injected into the browser!

Thanks for all your help on this, and sorry for the frustration. It was frustrating me as well, but glad it’s all sorted out. I am wondering if the `yarn` command was wrong in the first place in the README.md or what?

Thanks!

---

## Post 21 by @Martin_Kucera — 2018-05-16T15:07:25Z

@aolin480Its great! :slight_smile: