Hot reload not working #2392

shigurenimo · 2020-05-18T02:02:00Z

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

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

iDerekLi · 2020-05-19T05:35:24Z

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

xyyxlq · 2020-05-19T13:00:08Z

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 · 2020-05-20T11:06:19Z

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 · 2020-05-20T12:38:27Z

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

Yaakov-Belch · 2020-05-21T07:11:44Z

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 · 2020-05-21T07:35:36Z

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 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/core > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/core > chokidar > [email protected]: 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 > [email protected]: 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 > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning vuepress > @vuepress/core > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning vuepress > @vuepress/theme-default > stylus > css-parse > css > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning vuepress > @vuepress/core > chokidar > braces > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning vuepress > @vuepress/core > chokidar > braces > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" 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 [email protected] with the warning: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
chokidar depends on [email protected] or [email protected]. 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 · 2020-05-21T08:00:21Z

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 · 2020-05-22T02:48:40Z

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 · 2020-05-23T00:07:09Z

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 · 2020-05-24T04:42:41Z

me too

qyingkou · 2020-05-24T13:25:49Z

follow bug fixes...

faroit · 2020-05-24T13:27:52Z

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

kurotanshi · 2020-05-24T14:47:38Z

I have the same problem :(

bencodezen · 2020-05-24T15:36:02Z

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

changhighly · 2020-05-25T04:32:17Z

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 · 2020-05-25T06:22:02Z

"watchpack": "1.6.1"

npm i -D [email protected]

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 · 2020-05-25T08:00:11Z

@SCWR Thanks, it works.

ansky-pro · 2020-05-25T17:06:08Z

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 · 2020-05-26T02:08:12Z

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 · 2020-05-26T09:22:49Z

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 · 2020-05-26T10:37:38Z

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.

See <vuejs/vuepress#2392>.

morosefrog · 2020-05-28T02:25:18Z

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

Fixes hot reloading, details here: vuejs/vuepress#2392 (comment)

pikax · 2020-06-10T11:21:55Z

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

EDIT: Seen your issue

thominal · 2020-06-11T09:52:44Z

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 · 2020-06-23T15:59:09Z

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 · 2020-06-23T16:15:22Z

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 · 2020-06-24T06:45:18Z

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

bencodezen · 2020-06-24T15:26:18Z

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

SimZhou · 2020-06-30T11:59:33Z

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 · 2020-06-30T16:18:00Z

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 · 2020-06-30T16:26:08Z

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 · 2020-06-30T16:27:01Z

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 · 2020-07-17T14:07:07Z

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

surjithctly · 2020-07-17T14:46:39Z

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

SimZhou · 2020-07-17T17:06:04Z

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

aceven24 · 2020-07-18T02:09:06Z

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 <[email protected]> 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 · 2020-07-18T02:52:56Z

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

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

* fix: watch for chokidar v3 * chore: remove comments

vuejs/vuepress#2392 (comment)

sundayz · 2021-01-04T03:22:28Z

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 · 2021-01-05T10:36:52Z

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 · 2021-01-07T07:09:15Z

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

SimZhou · 2021-01-10T04:02:42Z

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 · 2021-01-10T04:20:56Z

Both are vue.js team projects

aku752 · 2021-04-13T20:58:36Z

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 · 2022-02-07T13:16:30Z

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 · 2022-08-23T15:14:28Z

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

This comment has been minimized.

Sign in to view

bencodezen added the type: bug Something isn't working label May 24, 2020

bencodezen added the priority: high High priority issue label May 24, 2020

bencodezen mentioned this issue May 24, 2020

Hot update failed and got error #2400

Closed

1 task

ansky-pro mentioned this issue May 25, 2020

Automatic Reload not working? #221

Closed

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

lock webpack version.

b3d465c

See <vuejs/vuepress#2392>.

dennisreimann added a commit to dennisreimann/btcpayserver-doc that referenced this issue May 28, 2020

Add temporary watchpack fix

e65246f

Fixes hot reloading, details here: vuejs/vuepress#2392 (comment)

dennisreimann mentioned this issue May 28, 2020

Add temporary watchpack fix btcpayserver/btcpayserver-doc#557

Merged

bencodezen unassigned yyx990803 Jun 10, 2020

larionov pushed a commit to larionov/vuepress that referenced this issue Aug 19, 2020

fix (vuejs#2392): hmr issue and watch for chokidar v3 (vuejs#2436)

aab4b6b

* fix: watch for chokidar v3 * chore: remove comments

dennisreimann added a commit to dennisreimann/hey-bitcoin.de that referenced this issue Nov 6, 2020

🐛 Temporary watchpack fix

f902e27

vuejs/vuepress#2392 (comment)

jcrist mentioned this issue Nov 9, 2020

Hot-reloading docs during development no longer works PrefectHQ/prefect#3633

Closed

sundayz mentioned this issue Jan 5, 2021

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

Closed

1 task

busyrat mentioned this issue Feb 24, 2021

可能会碰到的问题 busyrat/vuepress-plugins#3

Open

Chipsnet mentioned this issue Dec 12, 2021

Windowsではホットリロードが動かない、なぜ Chipsnet/docs.damare.m86.work#3

Closed

Hot reload not working #2392

Hot reload not working #2392

Comments

shigurenimo commented May 18, 2020 • edited Loading

Bug report

Steps to reproduce

What is expected?

What is actually happening?

Other relevant information

This comment has been minimized.

iDerekLi commented May 19, 2020

xyyxlq commented May 19, 2020

Karlbovski commented May 20, 2020

pepsifan commented May 20, 2020

Yaakov-Belch commented May 21, 2020

Yaakov-Belch commented May 21, 2020

pepsifan commented May 21, 2020

yangtao2o commented May 22, 2020

fmonper1 commented May 23, 2020 • edited Loading

a616781689 commented May 24, 2020

qyingkou commented May 24, 2020

faroit commented May 24, 2020

kurotanshi commented May 24, 2020

bencodezen commented May 24, 2020

changhighly commented May 25, 2020

SCWR commented May 25, 2020 • edited Loading

xyyxlq commented May 25, 2020

ansky-pro commented May 25, 2020

SCWR commented May 26, 2020

Loyz07 commented May 26, 2020

pepsifan commented May 26, 2020

morosefrog commented May 28, 2020 • edited Loading

pikax commented Jun 10, 2020 • edited Loading

thominal commented Jun 11, 2020

surjithctly commented Jun 23, 2020

bencodezen commented Jun 23, 2020

surjithctly commented Jun 24, 2020

bencodezen commented Jun 24, 2020

SimZhou commented Jun 30, 2020 • edited Loading

aceven24 commented Jun 30, 2020

SimZhou commented Jun 30, 2020

aceven24 commented Jun 30, 2020

sdwru commented Jul 17, 2020

surjithctly commented Jul 17, 2020

SimZhou commented Jul 17, 2020

aceven24 commented Jul 18, 2020 via email

surjithctly commented Jul 18, 2020

sundayz commented Jan 4, 2021

boris-savic commented Jan 5, 2021

meteorlxy commented Jan 7, 2021

SimZhou commented Jan 10, 2021 • edited Loading

meteorlxy commented Jan 10, 2021

aku752 commented Apr 13, 2021

euberdeveloper commented Feb 7, 2022

bbsimonbb commented Aug 23, 2022

shigurenimo commented May 18, 2020 •

edited

Loading

fmonper1 commented May 23, 2020 •

edited

Loading

SCWR commented May 25, 2020 •

edited

Loading

morosefrog commented May 28, 2020 •

edited

Loading

pikax commented Jun 10, 2020 •

edited

Loading

SimZhou commented Jun 30, 2020 •

edited

Loading

SimZhou commented Jan 10, 2021 •

edited

Loading