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

[SimonEast]

• [x] 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

1. Install vuepress@next globally - yarn global add vuepress@next

2. Start with empty folder and a single README.md file, with a few headings

3. Create a .vuepress/config.js file and enable a sidebar:

   themeConfig: {
   sidebar: ['/']
   }

4. Run vuepress dev and view in browser

5. Add frontmatter to README.md such as:

   ---

   title: X

   ---

6. Nothing happens. Content changes are reloaded, but none of the frontmatter data.

7. Add another sidebar item to config.js

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

[SGarno]

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]

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]

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]

+1

[favoyang]

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]

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.

[quanzaiyu]

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]

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]

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

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

[weishell]

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

[307590317]

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]

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]

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]

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

[surjithctly]

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]

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]

• "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]

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

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

[bencodezen]

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]

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]

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.