vuepress: Hot reload doesn't reflect frontmatter nor config.js changes

I confirm that this is a issue rather than a question.

Bug report

The hot reload functionality when using vuepress dev does not seem to pickup changes to:

*.md frontmatter
.vuepress/config.js

I’m new to VuePress so not sure if this was this previously working in earlier versions, but not working in 1.0.0-alpha.37.

Version

1.0.0-alpha.37

Steps to reproduce

Install vuepress@next globally - yarn global add vuepress@next
Start with empty folder and a single README.md file, with a few headings
Create a .vuepress/config.js file and enable a sidebar:
```
themeConfig: {
  sidebar: ['/']
}
```
Run vuepress dev and view in browser
Add frontmatter to README.md such as:
```
---
title: X
---
```
Nothing happens. Content changes are reloaded, but none of the frontmatter data.
Add another sidebar item to config.js
Again, the browser is not updated.

Not even a browser refresh helps in either of these issues. I have to quit the dev server and restart it for the frontmatter and new sidebar elements to be reflected in the browser.

What is expected?

I would expect the frontmatter data to be rescanned and injected into the page and reflected in sidebars.

What is actually happening?

Content changes are hot reloaded, but none of the frontmatter data nor config.js changes.

Other relevant information

Your OS: Windows 10
Node.js version: 10.2.1
Browser version: Chrome 73.0.3683.27 beta
Is this a global or local install? global
Which package manager did you use for the install? yarn

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 67
Comments: 32 (6 by maintainers)

Commits related to this issue

lock webpack version. https://github.com/vuejs/vuepress/issues/1283 — committed to enqueuezero/site by soasme 4 years ago
fix: 相依修正; 開發配置調整 + 修正了文章中的圖片路徑 > 相對路徑是指編譯前的路徑!! > 目前偏好在 markdown 中，不使用 alias + 更新相依套件以防止安全性漏洞 + 添加開發模式 hot-reload 問題的對應處理: [nodemon](https://github.com/vuejs/vuepress/issues/1283#issuecomment-6... — committed to uWayLu/blog by deleted user 4 years ago
fix($core): keep createTemp from desyncing webpack Calling emptyDirSync every time createTemp is called - i.e, every time App.process is called; i.e., every time source files update - throws off webp... — committed to spinda/vuepress by spinda 4 years ago
fix($core): keep createTemp from desyncing webpack Calling emptyDirSync every time createTemp is called - i.e, every time App.process is called; i.e., every time source files update - throws off webp... — committed to spinda/vuepress by spinda 4 years ago
fix($core): keep createTemp from desyncing webpack Calling emptyDirSync every time createTemp is called - i.e, every time App.process is called; i.e., every time source files update - throws off webp... — committed to spinda/vuepress by spinda 4 years ago
fix: 相依修正; 開發配置調整 + 修正了文章中的圖片路徑 > 相對路徑是指編譯前的路徑!! > 目前偏好在 markdown 中，不使用 alias + 更新相依套件以防止安全性漏洞 + 添加開發模式 hot-reload 問題的對應處理: [nodemon](https://github.com/vuejs/vuepress/issues/1283#issuecomment-6... — committed to uWayLu/uwaylu.github.io by deleted user 4 years ago

Most upvoted comments

Any updates on this? This is very irritating if you’re trying to use vuepress to something beyond docs.

+24

hyvyys on Feb 13, 2020

I’ve tried again in 1.0.0-alpha/47 and none of these changes are being hot reloaded (or even updated after a manual browser refresh):

Adding/editing frontmatter titles
Changing anything in .vuepress/config.js
Sidebars and sidebar config
Adding a new .md file

My VuePress console window tells me:

Reload due to change .vuepress\config.js

But then nothing is updated in my browser - not even after a manual refresh.

Is this different to what you’re experiencing @timaschew?

+14

SimonEast on Apr 18, 2019

Instead to ctrl+c and restart vuepress manually you can use nodemon to automate the restart on every file change.

npm i -D nodemon
Add to the scripts block in package.json: "start": "nodemon --ext md,vue --watch .vuepress --watch . --exec vuepress dev"
Start vuepress with npm start

After a change in .vue or .md files the vuepress dev command will be executed. The changes can be seen after a browser refresh.

+11

pepsifan on May 17, 2020

Instead to ctrl+c and restart vuepress manually you can use nodemon to automate the restart on every file change.

npm i -D nodemon

Add to the scripts block in package.json: "start": "nodemon --ext md,vue --watch .vuepress --watch . --exec vuepress dev"

Start vuepress with npm start

After a change in .vue or .md files the vuepress dev command will be executed. The changes can be seen after a browser refresh.

此方法有效，不过要注意最后的启动命令是vuepress dev doc this works for me, but pay attention to the final start cmd vuepress dev doc

qiuzhongrun on May 19, 2020

@bencodezen As requested, repo with replication: https://github.com/hyvyys/vuepress-frontmatter-hotreload-test

I’m on Windows 10, Node v14.13.0

Replication video: https://user-images.githubusercontent.com/20814638/105531681-fc99b800-5ce9-11eb-8c1f-fc0129629604.mp4

hyvyys on Jan 22, 2021

@ludanxer as @quanzaiyu stated the workaround with --temp .temp does only work for some configuration points:

It takes effect when I changed some dynamically configurations, but changing fontmatter didn’t work.

ckulenkampff on Oct 29, 2019

Still have this issue (both with config.js and frontmatter in the .md’s) and the workaround from @sundayz does not work for me. On vuepress 1.8.0 (on Windows 10, if that matters). The issue seems pretty open to me…

hyvyys on Jan 22, 2021

People are still reporting this issue (#2392). Hot reloading development does not work for me out of the box (Windows 10, Node 12, VuePress 1.7.1)

npm vuepress dev docs --temp .temp

This fixed it for me. So it looks like something is wrong with the watchOptions.ignore config here? https://github.com/vuejs/vuepress/commit/7e9d0c1f42196dee52daabfaf796e0cdaa7bd6eb

From what I remember webpack watch doesn’t really like Window style path separators \\, maybe that’s why setting a custom temp directory path fixes it. It must be somehow passing in a path with \ separators?

@bencodezen Maybe this issue should be reopened.

sundayz on Jan 5, 2021

Hey everyone. Sorry for the delay on this.

I’ve been testing this on v1.5.3 and on both Node v12 and v10 and it looks like it’s resolved.

If anyone is still encountering this, please re-open the issue and let me know what environment you’re on and hopefully a repo I can clone to help debug.

Hi @bencodezen,

I used ubuntu and have the same bug with “vuepress”: “^1.5.3” and node v12.13.1

damiansire on Sep 5, 2020

Frontmatter changes do work with version 1.0.0-alpha.44.

Also changes in the .vuepress/config.js are working, the title is refreshed in the sidebar.
To be fair: it only works for existing sidebar entries. So adding or deleting items to the sidebar doesn’t work!

timaschew on Apr 2, 2019

Hey everyone. Sorry for the delay on this.

I’ve been testing this on v1.5.3 and on both Node v12 and v10 and it looks like it’s resolved. 🎉

If anyone is still encountering this, please re-open the issue and let me know what environment you’re on and hopefully a repo I can clone to help debug.

bencodezen on Aug 17, 2020

This issue is opened in 2019 and its still open. Where are the Core Team?

Its not a small issue. It really affects the Development.

cc: @yyx990803 @ulivz @kefranabg @f3ltron @billyyyyy3320

I agree. This is actually kind of a showstopper issue as far as I’m concerned. I just discovered this tool and was excited until I installed it and hit this issue right away.

sdwru on Jul 17, 2020

Refs https://github.com/vuejs/vuepress/issues/1536

I tried run with vuepress dev docs --temp .temp, and updating config.js triggers refresh correctly, so does adding new page.

However I meet a new issue that all custom components failed after reload. Force refresh won’t fix it either. But I do find a trick that create or rename a md file will fix it.

Browser console: 
[Vue warn]: Unknown custom element: <List> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

favoyang on Jul 28, 2019

This is the same behavior I am experiencing in the latest pull of 1.x. I have worked extensively with 0.x and it works fine in that version.

Is this something that is on the near term radar for being fixed?

SGarno on Mar 28, 2019