vuepress: Hot reload not working

“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!

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

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"

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

You can update the configuration in package.json as follows

"devDependencies": {
    "vuepress": "^1.5.0",
    "watchpack": "1.6.1"
 }

then

npm install

finally

npm start

hot reloading is ok

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",
  }
}

Alright! Hopefully this is now fixed thanks to @pikax and @sodatea for their assistance.

For those on v1.5.0, please make sure to upgrade to v1.5.1 and then you should be good.

I’ll close the issue for now, but please let us know if it’s still broken for you!

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.

version 1.5.1

• Updating .md files. Hot reload OK.

• Updating config.js. Hot reload Not Working.

• Updating YAML Frontmatter in .md files. Hot reload Not working.

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.

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.

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

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

Thank you. I confirm the issue is solved for me!

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

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

@thominal this works for me

yarn add vuepress --dev
mkdir docs
echo hello > docs/index.md
echo 'module.exports = { title: "test"}' > docs/.vuepress/config.js
yarn vuepress dev docs

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

me too

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

You can update the configuration in package.json as follows

"devDependencies": {
    "vuepress": "^1.5.0",
    "watchpack": "1.6.1"
 }

then

npm install

finally

npm start

hot reloading is ok

yeah this solved my issue