Hot reload doesn't reflect frontmatter nor config.js changes #1283

SimonEast · 2019-02-12T07:35:48Z

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

The text was updated successfully, but these errors were encountered:

SGarno · 2019-03-28T03:48:29Z

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?

timaschew · 2019-04-02T07:30:50Z

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!

SimonEast · 2019-04-18T03:46:36Z

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?

jshor · 2019-05-25T15:49:47Z

+1

favoyang · 2019-07-27T13:18:09Z

Same here. [email protected] installed globally via yarn.

Environment Info:

$ vuepress info                                                      
...                         
  System:                                                            
    OS: Windows 10                                                   
    CPU: (8) x64 Intel(R) Core(TM) i7-2635QM CPU @ 2.00GHz           
  Binaries:                                                          
    Node: 10.9.0 - C:\Program Files\nodejs\node.EXE                  
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD          
    npm: 6.10.0 - ~\AppData\Roaming\npm\npm.CMD                      
  Browsers:                                                          
    Edge: 44.18362.1.0                                               
  npmPackages:                                                       
    @vuepress/core: Not Found                                        
    @vuepress/theme-default: Not Found                               
    vuepress: Not Found                                              
  npmGlobalPackages:                                                 
    vuepress: Not Found

Create a page named "new-page.md". Console detected the changes, but visit /new-page returns 404.

success [21:08:12] Build 9bda3d finished in 11198 ms!
> VuePress dev server listening at http://localhost:8080/
Reload due to add new-page.md
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

Update .vuepress/config.js (like title). Console detected the chagnes, but browser does not update. Force refresh won't work either.

eload due to change .vuepress\config.js
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
Reload due to change .vuepress\config.js
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
warning Override existing page /.
warning Override existing page /about.html.
...
warning Override existing page /new-page.html.

However, update existing page works as expected.

Relaunch vuepress dev server will fix everything.

favoyang · 2019-07-27T14:17:15Z

Refs #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.

quanzaiyu · 2019-07-31T07:05:45Z

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

Some dynamically configurations related files are as follows:

website\.vuepress\plugins\enhanceAppFiles\generateSidebars.js

website\.vuepress\plugins\enhanceAppFiles\index.js

website\.vuepress\config.js

I specify script in frontmatter:

website\books\canvas\index.md

It takes effect when changing file website\books\canvas\index.js

modified：

It works and there are two more menus in the sidebar

But it does not take effect when changing file website\books\canvas\index.md frontmatter

such as：

It doesn't work!

/books/canvas_test got 404

/books/canvas still can be accessed

liudonghua123 · 2019-09-05T01:39:05Z

I have the same problems. Everytime I modified the configuration files in .vuepress, The console logs shown detected the changes, but the page in browser did not changes. All I can do is ctrl+c , arrow up and enter to restart it manually.

ckulenkampff · 2019-10-29T13:30:47Z

@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.

hyvyys · 2020-02-13T16:59:10Z

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

weishell · 2020-04-27T07:42:55Z

The menu bar on the left side of the second level title and the third level title will not be updated now

307590317 · 2020-05-13T03:02:47Z

I meet the same problems in lastet version 1.5. Why hasn't this problem been solved？It has affected everyday use.I just want to have a normal incremental compilation and hot reload.

pepsifan · 2020-05-17T19:38:53Z

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.

qiuzhongrun · 2020-05-19T13:48:35Z

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

hdodov · 2020-06-15T07:53:41Z

Using 1.5.1 and I have the same problems. When I change .vuepress/config.js, nothing happens.

+ 修正了文章中的圖片路徑 > 相對路徑是指編譯前的路徑!! > 目前偏好在 markdown 中，不使用 alias + 更新相依套件以防止安全性漏洞 + 添加開發模式 hot-reload 問題的對應處理: [nodemon](vuejs/vuepress#1283 (comment))

surjithctly · 2020-07-17T11:48:52Z

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

sdwru · 2020-07-17T15:13:08Z

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 · 2020-07-17T15:22:25Z

"start": "nodemon --ext md,vue --watch .vuepress --watch . --exec vuepress dev doc"

This doesn't work for me. It restarts but the menu still doesn't get loaded. I've tried all the supposed fixes I have found on this issue. Only solution is stopping then starting vuepress dev doc. So frustrating.

What is everyone doing now? Are you all just living with this or is there some other tool I should be looking at?

jemerald · 2020-07-20T03:56:23Z

@sdwru add js to the list of extensions if you want nodemon to restart the vuepress dev server when you change the config file.

i.e.

"start": "nodemon --ext md,vue,js --watch .vuepress --watch . --exec vuepress dev doc"

lipecss · 2020-07-24T20:03:06Z

im still getting warning Override existing page on console And the browser does not automatically update

Calling emptyDirSync every time createTemp is called - i.e, every time App.process is called; i.e., every time source files update - throws off webpack-dev-server, causing it to lose track of the source files and subdirectories. This leads to a variety of sporadic errors and breaks auto-refresh of frontmatter and configuration. Fix this by avoiding emptying temporary directories when we can detect that they were previously initialized by the same instance of the VuePress process. Fixes vuejs#1283. Fixes vuejs#2233. Fixes vuejs#2254. Fixes vuejs#2437.

bencodezen · 2020-08-17T15:17:49Z

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.

damiansire · 2020-09-05T03:39:51Z

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

electric-skeptic · 2020-09-08T15:02:11Z

I still have this problem too.

VuePress 1.5.3 & 1.5.4
Node 14.2
Windows 10

It's not so cumbersome to restart the dev server, a hotkey helps, but for the sake of speed VitePress looks like it's becoming a terrific alternative! It is comparatively minimalistic and may not be stable yet.

Akryum · 2021-01-05T15:26:00Z

Also seeing this issue with sidebar: auto in a md file.

sundayz · 2021-01-05T15:32:47Z

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? 7e9d0c1

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.

meteorlxy · 2021-01-07T07:09:50Z

If you are not strictly using vue 2, try vuepress 2 or vitepress.

zhoufanglu · 2021-01-15T06:07:53Z

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

这是正确的方法。希望他们的方法能帮助你们。
This is the right approach.I hope their methods will help you.

hyvyys · 2021-01-22T18:18:56Z

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...

sundayz · 2021-01-22T18:20:50Z

Does anyone know if vuepress 2 as mentioned by @meteorlxy is usable or if its just an alpha? And what exactly is vitepress, I'm not sure on the difference between vuepress and vitepress.

hyvyys · 2021-01-22T18:43:54Z

@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

+ 修正了文章中的圖片路徑 > 相對路徑是指編譯前的路徑!! > 目前偏好在 markdown 中，不使用 alias + 更新相依套件以防止安全性漏洞 + 添加開發模式 hot-reload 問題的對應處理: [nodemon](vuejs/vuepress#1283 (comment))

laizp · 2022-06-24T09:51:11Z

Have this issue too, we still using vue2 so cannot change to vuepress2 or vitepress as alternative.

laizp · 2022-06-24T09:57:48Z

Have this issue too, we still using vue2 so cannot change to vuepress2 or vitepress as alternative.

VuePress v1.9.7
NodeJs v14.19.1
Windows 10

kefranabg added contribution welcome Contributions welcome priority: high High priority issue topic: config Relates to VuePress config type: bug Something isn't working labels Oct 16, 2019

haoranpb mentioned this issue Jan 6, 2020

Why I can't use plugins in vuepress ? #2110

Closed

1 task

meteorlxy pinned this issue Mar 3, 2020

meteorlxy mentioned this issue Mar 3, 2020

Yarn run docs:dev stops execution after changing config.js #2201

Open

1 task

This was referenced Mar 22, 2020

sidebar: auto does not update with document changes #2233

Open

No such file: node_modules/@vuepress/core/.temp/app-enhancers/global-components-2.js #2254

Closed

meteorlxy unpinned this issue May 11, 2020

pepsifan mentioned this issue May 20, 2020

Hot reload not working #2392

Closed

1 task

soasme added a commit to enqueuezero/site that referenced this issue May 27, 2020

lock webpack version. vuejs/vuepress#1283

d1a277f

surjithctly mentioned this issue Jul 17, 2020

Updating config.js or YAML Frontmatter don't trigger Hot Reload #2437

Open

bencodezen self-assigned this Aug 11, 2020

bencodezen closed this as completed Aug 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hot reload doesn't reflect frontmatter nor config.js changes #1283

Hot reload doesn't reflect frontmatter nor config.js changes #1283

SimonEast commented Feb 12, 2019

SGarno commented Mar 28, 2019

timaschew commented Apr 2, 2019 •

edited

Loading

SimonEast commented Apr 18, 2019 •

edited

Loading

jshor commented May 25, 2019

favoyang commented Jul 27, 2019

favoyang commented Jul 27, 2019 •

edited

Loading

quanzaiyu commented Jul 31, 2019

liudonghua123 commented Sep 5, 2019

ckulenkampff commented Oct 29, 2019

hyvyys commented Feb 13, 2020

weishell commented Apr 27, 2020

307590317 commented May 13, 2020

pepsifan commented May 17, 2020

qiuzhongrun commented May 19, 2020

hdodov commented Jun 15, 2020

surjithctly commented Jul 17, 2020 •

edited

Loading

sdwru commented Jul 17, 2020 •

edited

Loading

sdwru commented Jul 17, 2020 •

edited

Loading

jemerald commented Jul 20, 2020

lipecss commented Jul 24, 2020

bencodezen commented Aug 17, 2020

damiansire commented Sep 5, 2020 •

edited

Loading

electric-skeptic commented Sep 8, 2020

Akryum commented Jan 5, 2021

sundayz commented Jan 5, 2021

meteorlxy commented Jan 7, 2021

zhoufanglu commented Jan 15, 2021

hyvyys commented Jan 22, 2021 •

edited

Loading

sundayz commented Jan 22, 2021

hyvyys commented Jan 22, 2021 •

edited

Loading

laizp commented Jun 24, 2022

laizp commented Jun 24, 2022

Hot reload doesn't reflect frontmatter nor config.js changes #1283

Hot reload doesn't reflect frontmatter nor config.js changes #1283

Comments

SimonEast commented Feb 12, 2019

Bug report

Version

Steps to reproduce

What is expected?

What is actually happening?

Other relevant information

SGarno commented Mar 28, 2019

timaschew commented Apr 2, 2019 • edited Loading

SimonEast commented Apr 18, 2019 • edited Loading

jshor commented May 25, 2019

favoyang commented Jul 27, 2019

favoyang commented Jul 27, 2019 • edited Loading

quanzaiyu commented Jul 31, 2019

liudonghua123 commented Sep 5, 2019

ckulenkampff commented Oct 29, 2019

hyvyys commented Feb 13, 2020

weishell commented Apr 27, 2020

307590317 commented May 13, 2020

pepsifan commented May 17, 2020

qiuzhongrun commented May 19, 2020

hdodov commented Jun 15, 2020

surjithctly commented Jul 17, 2020 • edited Loading

sdwru commented Jul 17, 2020 • edited Loading

sdwru commented Jul 17, 2020 • edited Loading

jemerald commented Jul 20, 2020

lipecss commented Jul 24, 2020

bencodezen commented Aug 17, 2020

damiansire commented Sep 5, 2020 • edited Loading

electric-skeptic commented Sep 8, 2020

Akryum commented Jan 5, 2021

sundayz commented Jan 5, 2021

meteorlxy commented Jan 7, 2021

zhoufanglu commented Jan 15, 2021

hyvyys commented Jan 22, 2021 • edited Loading

sundayz commented Jan 22, 2021

hyvyys commented Jan 22, 2021 • edited Loading

laizp commented Jun 24, 2022

laizp commented Jun 24, 2022

timaschew commented Apr 2, 2019 •

edited

Loading

SimonEast commented Apr 18, 2019 •

edited

Loading

favoyang commented Jul 27, 2019 •

edited

Loading

surjithctly commented Jul 17, 2020 •

edited

Loading

sdwru commented Jul 17, 2020 •

edited

Loading

sdwru commented Jul 17, 2020 •

edited

Loading

damiansire commented Sep 5, 2020 •

edited

Loading

hyvyys commented Jan 22, 2021 •

edited

Loading

hyvyys commented Jan 22, 2021 •

edited

Loading