Hot reload not working

[reiwa]

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

Bug report

Steps to reproduce

$ yarn add vuepress --dev
$ mkdir docs
$ youch docs/index.md
$ yarn vuepress dev docs

success [08:52:12] Build 1d01b9 finished in 172 ms! ( http://localhost:8080/ )

What is expected?

Vuepress CLI detects file changes and rebuilds.

What is actually happening?

Vuepress CLI doesn't detect file changes. I have to run vuepress dev docs again to build codes.

Other relevant information

• Output of npx vuepress info in my VuePress project:

% npx vuepress info

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 14.2.0 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.4 - ~/.nodebrew/current/bin/yarn
    npm: 6.14.4 - ~/.nodebrew/current/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: Not Found
  npmPackages:
    @vuepress/core:  1.5.0 
    @vuepress/theme-default:  1.5.0 
    vuepress: ^1.5.0 => 1.5.0 
  npmGlobalPackages:
    vuepress: Not Found

[iDerekLi]

I have the same situation. After testing node v10.15.3 hot not working. Node v12.14.0 hot working

[xyyxlq]

I have the same problem too.
When I change the content of .md files, the hot reload don't work, even the Vuepress CLI doesn't detect file changes.
I have tried with node v10.15.0 and node v12.16.3，but the hot still don't works。

[Karlbovski]

Same here, not sure if it´s related to the latest Node v12.16.3 upgrade I've made, since in some projects (with similar packages structure and same pkgs versions) hot reloading still works. Very confused atm...

[pepsifan]

I had the same problems a few days ago. I use a workaround to restart the server on file change. See here.

[Yaakov-Belch]

I tried vuepress 1.4.1 with node 12.16.3 with a new install now -- and it vuepress does not recognize document changes (hot reload does not work). It looks like a regression in one of the dependencies --- so by loading the newer version of the dependency, the feature breaks. I don't know what package is broken.

[Yaakov-Belch]

It seems that in its dependency chain, vuepress uses outdated packages for Chokidar and fsevents that are responsible for watching file changes.

Here is my current install log:

warning vuepress > @vuepress/core > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/core > webpack-dev-server > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/core > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning vuepress > @vuepress/theme-default > docsearch.js > hogan.js > mkdirp@0.3.0: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
warning vuepress > @vuepress/theme-default > docsearch.js > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning vuepress > @vuepress/core > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/theme-default > stylus > css-parse > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning vuepress > @vuepress/core > chokidar > braces > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning vuepress > @vuepress/core > chokidar > braces > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

As far as I see, the relevant messages are:

• vuepress/core and webpack-dev-server depend on chokidar@2.1.8 with the warning: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
• chokidar depends on fsevents@1.2.13 or fsevents@2.1.3. Both of these package issue the warning The platform "linux" is incompatible with this module. Quite possibly, chokidar uses other modules on the linux platform.

[pepsifan]

As I can see, chokidar is only used for watching files which are added or deleted (see source) and for changes in the config file (see source). I rather think it's a problem with a loader for the webpack server which can't detect changes of .md and .vue files. The loaders are registered in createBaseConfig.js.

[yangtao2o]

I have the same problems now.
Currently, the best solution that does not affect normal use is to directly replace the previous whole node_modules, then without npm install, and just npm run dev the project.
I used the vuepress 1.41 package I downloaded earlier, now node v12.16.3, hot reload working

Yes, this way is currently the most effective，and wait for the latest version to deal with this problem.

I used the vuepress v1.40, and node v14.2.0, hot reload working.

And use nodemon to automate the restart on every file change. Thanks @pepsifan .

yarn add -D nodemon

{
  "scripts": {
    "dev": "nodemon --ext md,vue --watch .vuepress --watch . --exec vuepress dev docs",
  }
}

[fmonper1]

Vuepress v1.4.0, hot reloading not working with node v14.3.0. Using nodemon isnt working either

Edit: For some reason updating the config.js does trigger the hot reload, but nothing happens with the other files

[a616781689]

me too

[qyingkou]

follow bug fixes...

[faroit]

is there any working workaround (I would be willing to downgrade to older versions)... when was this broken?

[kurotanshi]

I have the same problem :(

[bencodezen]

Thanks for filing the issue @reiwa! Going to take a look into this as a high priority. Appreciate it!

[changhighly]

I have the same problems now.
Currently, the best solution that does not affect normal use is to directly replace the previous whole node_modules, then without npm install, and just npm run dev the project.
I used the vuepress 1.41 package I downloaded earlier, now node v12.16.3, hot reload working

Yes, this way is currently the most effective，and wait for the latest version to deal with this problem.

I used the vuepress v1.40, and node v14.2.0, hot reload working.

And use nodemon to automate the restart on every file change. Thanks @pepsifan .

yarn add -D nodemon

{
  "scripts": {
    "dev": "nodemon --ext md,vue --watch .vuepress --watch . --exec vuepress dev docs",
  }
}

Although it works, I have to refresh my browser for it to work

[SCWR]

"watchpack": "1.6.1"

npm i -D watchpack@1.6.1

I noticed that the webpack hot update plugin watchpack is now 1.7.2
I compared the previous project and found it was 1.6.1
So I tried to install this version
It's ready for hot update

npx vuepress info

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 10.15.2 - D:\nodejs\version\node.EXE
    Yarn: 1.22.4 - D:\YarnCache\bin\yarn.CMD
    npm: 6.14.5 - D:\YarnCache\bin\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @vuepress/core:  1.5.0
    @vuepress/theme-default:  1.5.0
    vuepress: ^1.5.0 => 1.5.0
  npmGlobalPackages:
    vuepress: Not Found

yarn installs "watchpack": "^1.6.1" separately in webpack
This automatically correlates to 1.7.2
So it only works in npm mode
yarn solution is answered below

In a project created by @vue/cli 4.3.1, the watchpack is 1.7.2, but it can still trigger hot updates
Confused!

[xyyxlq]

@SCWR Thanks, it works.

[ansky-pro]

Thanks to @SCWR I got it working by downgrading watchpack to 1.6.1
Added resolutions section to package.json and ran yarn install

  "resolutions": {
    "watchpack": "1.6.1"
  }

Hope this helps to anyone struggling with the same problem

[SCWR]

Thanks to @SCWR I got it working by downgrading watchpack to 1.6.1
Added resolutions section to package.json and ran yarn install

  "resolutions": {
    "watchpack": "1.6.1"
  }

Hope this helps to anyone struggling with the same problem

I acquired new knowledge @ansky-pro Thanks

[Loyz07]

Thanks to @SCWR I got it working by downgrading watchpack to 1.6.1
Added resolutions section to package.json and ran yarn install

  "resolutions": {
    "watchpack": "1.6.1"
  }

Hope this helps to anyone struggling with the same problem

I acquired new knowledge @ansky-pro Thanks

Hello,

For those who still want to use npm (resolutions only works with yarn by default). You can use this package : https://github.com/rogeriochaves/npm-force-resolutions.

[pepsifan]

I think, a good solution would be to commit the package-lock.json into the repo. So the users only have to npm ci. This will ensure that the deps are exactly the same like the ones defined in package-lock.json.

[morosefrog]

Thanks to @SCWR I got it working by downgrading watchpack to 1.6.1
Added resolutions section to package.json and ran yarn install

  "resolutions": {
    "watchpack": "1.6.1"
  }

Hope this helps to anyone struggling with the same problem

Good job , Thanks

[pikax]

@tecnoloco can you provide a repo where I can reproduce that, please?

EDIT: Seen your issue

[thominal]

Hi,

@bencodezen @pilax

I try to recreate a new project from scratch: I have the same observations as @tecnoloco :

• No issue with .md files, hot reload works well
• However, I need to restart manually my server to see config.js changes.

My config.js file is as simple as:

module.exports = { title: 'Hello Wolrd', description: 'Just playing around' }

Thanks

[surjithctly]

I tried everything in the above. But its not working for me too in windows.

The terminal log updates and says build is finished. But its not updating in server. Even refresh not working. had to terminate the job and run vuepress dev again to see the changes.

Please provide me a fix.

[bencodezen]

Hi @surjithctly! We're tracking the bug regarding the config and frontmatter here: #2437

Are you still having issues with the markdown files not reloading?

[surjithctly]

@bencodezen Yes. Markdown works fine. The data inside --- 3 lines do not work.

[bencodezen]

@surjithctly Got it. I would definitely add your comments and threads to #2437 then. Thank you!

[SimZhou]

webpack downgraded to 1.6.1, but still not working.

• √ Changing content in .md file works
• × Changing front matter in .md file NOT works
• × Changing config.js NOT works

[aceven24]

Same here, frontmatter in .md does not work.
I'm using a local custom theme
Also Typescript

Here is my info

Environment Info:

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i5-1035G7 CPU @ 1.20GHz
Binaries:
Node: 12.13.1 - ~\AppData\Local\Temp\yarn--1593533765469-0.49432315341001365\node.CMD
Yarn: 1.21.1 - ~\AppData\Local\Temp\yarn--1593533765469-0.49432315341001365\yarn.CMD
npm: 6.12.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
@vuepress/core: 1.5.2
@vuepress/theme-default: 1.5.2
vuepress: ^1.5.2 => 1.5.2
npmGlobalPackages:
vuepress: Not Found

[SimZhou]

Try npm vuepress dev docs --temp .temp/yarn vuepress dev docs --temp .temp instead. See if it works for you.

If yes you could write this into package.json: "dev": "vuepress dev docs --temp .temp"

[aceven24]

Try npm vuepress dev docs --temp .temp/yarn vuepress dev docs --temp .temp instead. See if it works for you.

If yes you could write this into package.json: "dev": "vuepress dev docs --temp .temp"

Tried that, even blew away my node_modules an yarn lock and reinstalled, same issue.. :-(

[sdwru]

Any updates. I'm having the same problem. Using yarn vuepress dev docs --temp .temp doesn't work either.

[surjithctly]

@sdwru Check this open issue from 2019. Still not fixed #1283

[SimZhou]

Evan is now making a new tool to solve it...
check vuejs/vitepress#motivation

[aceven24]

Does not work for me I’m on 12.13.1

…

Sent from my iPhone On Jul 17, 2020, at 4:02 AM, andrea-ccc <notifications@github.com> wrote:  Hi guys, just trying vuepress (v.1.3.1) on Node.js v12.18.2 and having the same problem. Rolling back to Node.js v12.13.1 solved the issue. Hope that helps. Note: I always manage Node.js via nvm<https://github.com/nvm-sh/nvm>, so changing versions just for a project or even a session is pretty easy. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#2392 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADI5LVNR7D2XH3WAJPLDQBLR4AARJANCNFSM4NDVEPSQ>.

[surjithctly]

Evan is now making a new tool to solve it...
check vuejs/vitepress#motivation

That’s an awesome news. Thanks for letting me know.

[sundayz]

Try npm vuepress dev docs --temp .temp/yarn vuepress dev docs --temp .temp instead. See if it works for you.

If yes you could write this into package.json: "dev": "vuepress dev docs --temp .temp"

This worked for me using 1.7.1 and npm, Windows 10. I don't know why or what it does.

[boris-savic]

Try npm vuepress dev docs --temp .temp/yarn vuepress dev docs --temp .temp instead. See if it works for you.
If yes you could write this into package.json: "dev": "vuepress dev docs --temp .temp"

This worked for me using 1.7.1 and npm, Windows 10. I don't know why or what it does.

This works for me as well for config.js changes but not for index.md changes.

Also running on Windows 10 with Node 14.15.0.

[meteorlxy]

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

[SimZhou]

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

what's the difference between these two btw? Which one is official, or both?@meteorlxy

[meteorlxy]

Both are vue.js team projects

[aku752]

Prueba npm vuepress dev docs --temp .temp/ en su yarn vuepress dev docs --temp .templugar. Mira si te funciona.

Si es así, puede escribir esto en package.json: "dev": "vuepress dev docs --temp .temp"

Try npm vuepress dev docs --temp .temp/yarn vuepress dev docs --temp .temp instead. See if it works for you.

If yes you could write this into package.json: "dev": "vuepress dev docs --temp .temp"

Gracias me funciono lo del .md y config. :)

[euberdeveloper]

Thanks to @SCWR I got it working by downgrading watchpack to 1.6.1 Added resolutions section to package.json and ran yarn install

  "resolutions": {
    "watchpack": "1.6.1"
  }

Hope this helps to anyone struggling with the same problem

For whom does not use yarn but npm, "ovverides" should be the analogue

[bbsimonbb]

I added the resolutions section to package.json. Still broken. Ouch.