Eleventy: Hot reload not working

[StarfallProjects]

Describe the bug
I am working through the getting started tutorial. Hot reload does not work (no browser reload on save, and even with manual refresh changes are not picked up_

To Reproduce
Steps to reproduce the behavior:

1. Work through the getting started tutorial up to here
2. Run npx @11ty/eleventy --serve
3. Visit http://localhost:8080/
4. Make a change to index.html (for example, add some more text). Save the file.
5. Nothing happens

Expected behavior
On save, I expected the browser to reload and my new text to display.

Environment:

• Windows 10
• Eleventy 0.9.0
  
  
  
  • Browser is Google Chrome, and am running in the terminal in VS Code
  
  

[francisbarton]

I came here to report the same (or v similar) issue as the OP. I have been editing my index.css file and expecting the reload to happen, but it doesn't.
I just looked again at the Getting Started page and what it actually says is:

Go to http://localhost:8080/ or http://localhost:8080/README/ to see your Eleventy site live! Make a change to your template files and save them—Eleventy using BrowserSync will refresh the browser with your new changes automatically.

So I am wondering if @StarfallProjects and I are actually wrong in expecting a reload after editing a source file such as index.html (I'm assuming this is a source file you are talking about, not a template?) or a CSS file. Maybe the hot reload only works when a template file is edited.
It would be good to have some clarification on this.

[StarfallProjects]

There is some naming confusion here - apparently, any file eleventy processes is a template file: https://twitter.com/starfalldocs/status/1175425510496788481

So things like html and md files (what I would think of as "content") are also referred to as template files.

[francisbarton]

Ah - good point. I'm new to this and I think I am getting "templates" and "layouts" confused.

[StarfallProjects]

I had exactly the same confusion, hence the tweet :-) I'm so used to a template being something that gets applied to content.

[TigersWay]

Same problem & same definition: No "re-build" after any change on any file (serve or watch)

Environment:
Windows 10
Node: 12.7.0
Eleventy: 0.9.0

[frigus02]

Can confirm the issue on Windows 10. In WSL (Ubuntu) watching works fine.

I dug a bit deeper. On file changes eleventy is supposed to log "File changed:" (source) but even this does not happen on Windows. I assume it's related to this open issue in the file watcher chokidar for version 3.1.1, which is the version that got installed for me: https://github.com/paulmillr/chokidar/issues/888.

I force installed chokidar 3.1.0 and watching started working on Windows.

When using yarn you can try to add the following to your package.json and see if it works for you:

  "resolutions": {
    "@11ty/eleventy/chokidar": "3.1.0"
  },

[TigersWay]

With some help from @zkochan

pnpm i -D @11ty/eleventy typescript [email protected]
pnpm up --depth 999

The right "File changed" appears, the "[Browsersync] Reloading Browsers..." also but I don't get the hot reloading.
To be honest I am a very new user so I am yet to see it once and it could be my mistake.

[TigersWay]

Started a new project from scratch, and with the lines I wrote earlier (minus --saveDev) , it works perfectly!

pnpm i @11ty/eleventy typescript [email protected]
pnpm up --depth 999

[Archeelux]

Started a new project from scratch, and with the lines I wrote earlier (minus --saveDev) , it works perfectly!

pnpm i @11ty/eleventy typescript [email protected]
pnpm up --depth 999

Sweet, that works for me too!

NOTE
I had eleventy installed globally so I had to remove it and then only use it locally.

[TigersWay]

chokidar
3.2.0 • Public • Published an hour ago

[frigus02]

Can confirm that the issue is fixed for me with the latest version of chokidar. A yarn upgrade or npm update respectively should update the package (I think) and solve the issue.

This can probably be closed.

[martinkz]

I'm having the same problem, when I make a change to a js data file (in /_data/), while running "eleventy --serve", eleventy doesn't rebuild the site. If I run eleventy manually, then it rebuilds it. Should this have been fixed?

Windows 10
Node: 12.13.1
Eleventy: 0.9.0

[AnandChowdhary]

A related problem:

const { getDescription } = require("./helpers/templates");

eleventyConfig.addNunjucksAsyncShortcode(
  "description", async value => await getDescription(value)
);

Now, when ./helpers/templates.js is updated, eleventy builds the site again but the value of the description shortcode isn't actually updated. Perhaps the function is cached somewhere? Only when a full build is called is when the new contents of the function used.

[jackperry]

I'm experiencing this issue on a brand new 11ty installation on Windows 10, and with a brand new Skeleventy installation (probably the same issue since it uses 11ty).

I followed the Getting Started docs completely and everything installs and runs fine, but once I get to step 5 and use npx @11ty/eleventy --serve the hot reload just isn't working at all. I edited the example index.html file and simply changed "Hi" to "Hello" and nothing is happening. Same with the example README.md file. Command line output stops at "[Browsersync] Serving files from: _site" and no changes to any files produce any new output, error, or anything. Kinda lost on what could be going on here. 🤷🏻‍♂️

Note: I did read the comments about chokidar version, but the version recommended to upgrade to is already an old version in the latest 11ty, so I assume this is a new bug somewhere.

Windows 10
Node: 12.14.1
Eleventy: 1.0.0

[jackperry]

Hey all, commenting again for people who may come across this issue.

Thanks to Dave Rupert's tweet I did some thinking and checked for what version of WSL I was using with wsl -l -v in Windows PowerShell. Turns out a recent Windows update had updated me to WSL2. I went ahead and ran wsl --set-version Ubuntu 1 and waited about 45 minutes for it to complete. Once it did all of my serve and watch (11ty and Webpack/Laravel Mix) started detecting file changes again.

Seems like this might be a bug present in some versions of WSL2 as others seem to not have the issue. If you are having issues, go ahead and try reverting to WSL1. Not an ideal long-term solution but it's good enough for now!

[kevinmpowell]

I ran into a similar issue. Make sure your test template has a <body> tag in it. BrowserSync relies on that to inject the JS that causes the actual browser refresh. That problem has been biting me for too many years. 🤦‍♂

[mvolkmann]

This is still an issue. Here are the steps I used to reproduce this:

1. Create a new directory and cd to it.
2. Enter npm init -y
3. Enter npm install -D @11ty/eleventy.
4. Create index.md file containing "test".
5. Enter npx eleventy --serve
6. Browse localhost:8080 and notice that "test" is displayed.
7. Add a line of any text to index.md.
8. Notice the output where eleventy is running that says "File changed", "Writing", "Wrote", and "Reloading Browsers".
9. Notice that the new line does not appear in the browser.
10. Refresh the browser and see the new line. You shouldn't need to manually reload the browser.

[kareldries]

Agreed, this is still an issue. I experienced the same as @mvolkmann.

edit: seems to be ok now after a restart, could also be I was editing the wrong index.html

[pdehaan]

Per https://www.11ty.dev/docs/getting-started/#step-5-gaze-upon-your-templates

Important Note: Editing README.md won't refresh your browser automatically, because Browsersync requires a <body> tag in your template for live-reload to work properly.

[mvolkmann]

I don't get a browser refresh after editing any file. I'm not editing README.md.

[mvolkmann]

Maybe I understand what @pdehaan was getting at now. I CAN get hot reload to work if my pages use a layout that includes a body tag.

See my list of steps to reproduce the issue from two days ago.
Here are the minimal additional steps that must be added to get hot reloading to work.

1. Create the directory _includes.
2. Add the file layout.md inside containing this:

<html lang="en">
  <body>
    {{content | safe}}
  </body>
</html>

1. Add this front matter to index.md:

---
layout: layout.md
---

With these changes in place, hot reload works for me. I can modify the content of index.md and the browser will refresh.

Perhaps this issue can be closed. Please comment if this additional information doesn't fix hot reload for you.

[cfjedimaster]

I just want to add that I recently switched to WSL2 and I'm experiencing the issue as well. I am testing with a page that has a body tag.

[amykapernick]

Seconded, I've just switched to WSL2 and the reloading isn't working, it's not even detecting a file change

[cfjedimaster]

I should have followed up. For me, simply moving from working with /mnt/c/projects/foo to ~/projects/foo fixed everything. I was used to working with /mnt/c so that my editors, like Visual Studio Code, could access the files. But VSC can now work w/ WSL2 directly. Also, moving to the Ubuntu file system gives you huge performance improvements. While I still think this is an "issue", I think there is a workaround that is much more preferable in general. I talk more about the process here: https://www.raymondcamden.com/2020/05/08/notes-on-upgrades-to-wsl2-and-why-you-should

[amykapernick]

Have started moving my projects to inside the WSL folders and yes that's fixed it.

Good to know of the fix/workaround.

[kennaruk]

A related problem:

const { getDescription } = require("./helpers/templates");

eleventyConfig.addNunjucksAsyncShortcode(
  "description", async value => await getDescription(value)
);

Now, when ./helpers/templates.js is updated, eleventy builds the site again but the value of the description shortcode isn't actually updated. Perhaps the function is cached somewhere? Only when a full build is called is when the new contents of the function used.

Still reproducible kind of this issue.
eleventy --config config.eleventy.js --serve
I use config.eleventy.js which contains these codes

module.exports = function (eleventyConfig) {
  required('another-separate-config')(eleventyConfig).
}

to make the project cleaner and maintainable.

When I save 'another-separate-config', project does reload but it doesn't update the change of this file on the webpage or _site.
As a workaround, I have to back to the config.eleventy.js then hit cmd+s, ctrl+s again to trigger the hot-reload build.

[zachleat]

Wow—alright sorry for the late reply here but it seems like there are about 4 different issues being tossed around here.

1. Confusion around Markdown requiring a <body>. Docs have been updated to help with this at #726.
2. Issues with browser-sync on WSL1/WSL2/WSL folders that @cfjedimaster has provided some guidance on (Thanks!)
3. External regression with chokidar 3.1.1 that was fixed.
4. Separate but outstanding issue with watching JS dependencies that @AnandChowdhary reported https://github.com/11ty/eleventy/issues/701#issuecomment-575613848 I’ve filed this separately at #1312.

As 3 of the 4 reports are resolved and the fourth one is filed separate, I’m going to close this one up—thanks!

[Miosame]

... While I still think this is an "issue", I think there is a workaround that is much more preferable in general. I talk more about the process here ...

@cfjedimaster did I miss the part you mention a real alternative as hinted at by the quoted text? it feels like you just addressed using remote-wsl again, just like in the post, which isn't a solution nor a "much more preferable workaround", as you still have to have it in $wsl not in /mnt to be able to use workspaces anywhere on your system.

[cfjedimaster]

Not sure what to tell you. To me, it was a real alternative and better due to improved performance of WSL2 in general. I was offering it up here as a helpful hint, and at least one person said it helped so I guess that's something. :)

[Miosame]

@cfjedimaster just was hoping for an alternative you forgot to mention possibly, where we are still able to have our files in synced directories on host, instead of inside wsl, wasn't a jab at you.