Webpack: Hot Reload not responding to changes on components

[libnull]

When running the server in dev mode, it seems to be not responding to changes on any component file. Webpack throws no error and the browser does not get refreshed.

Steps to reproduce the issue:
* Using node v6.9.1.
1. Run vue init webpack
2. When prompted Vue build select Runtime + Compiler
3. Once the command finished, run npm run dev
4. In the Hello.vue file add some code inside the <template> or <script> tags.

[chmln]

I've just spent hours trying to figure this out.

After latest upgrades, changes to .vue files in sublime have no effect.
Opening the same file in VS Code, making changes = no effect either.

Rebooting, running dev, making changes to a file in VS Code only = works.

Additionally, no problems are encountered by using the vue-cli webpack template.
However, simply replacing the src folder with my own, with a similar structure but containing nested single-file components breaks hot reload and hot module replacement, without any errors

[valZho]

I am ready to tear my hair out! Nothing I do will get anything to reload _anything_ (short of quitting and relaunching the process in the terminal). This is just with the base install of the webpack template not even adding anything complicated—just trying to type "asdf" into the template on "Hello.vue". I've deleted the folder and reinstalled sooooo many times.

On Mac OS X 10.12.1. Started off with Node 4 something, upgraded to 7.2.0 now with no change. As reported above, nothing gives me errors, the build works, the page loads... just no auto-refresh or hot reloading.

[patrickodacre]

I have the same issue, but to be fair I have always had this problem with HMR. Definitely not worth it.

The suggestion made here may help: https://github.com/vuejs-templates/webpack/issues/349

I'm using PhpStorm and this seems to have done the trick for me.

[chmln]

Specifying watchOptions for the dev middleware seems to address this problem.

In build/dev-server.js:21

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
})

[patrickodacre]

I also had my options configured as above, but still had the issue =\

[valZho]

Holy crap (none of the above were the issue). Ran across this on stack overflow:

http://stackoverflow.com/questions/26708205/webpack-watch-isnt-compiling-changed-files

Long story short, my project folder was in my OneDrive folder which, I think, is somehow hijacking FSEvents (on the Mac)... even when I force closed all OneDrive-related processes I could find, turned Spotlight off on that whole tree, deleted .DS_Store files in all paths leading to my project, and renamed folders... it still wouldn't work.

Move it out of the OneDrive directory and everything started working fine. I don't know how many hours were wasted on this stupid problem, but someone should put this as a warning in the repo so others won't have to live my frustration:

"Disclaimer: If you try to create your package in a cloud-synced directory (a la OneDrive, DropBox, Google Drive, etc.), you're going to have a bad time. ...and by 'bad time' we mean that the watchers that enable hot reloading probably won't work."

[AndrewBogdanovTSS]

I have my project created into usual directory, no cloud-synced stuff, but still, it doesn't work for me. I just set up a default webpack-simple project. I'm on Windows 10, using WebStorm. My dev command is default one and look like this cross-env NODE_ENV=development webpack-dev-server --open --inline --hot So I guess this issue should be reopened.

[patrickodacre]

Have you tried this https://github.com/vuejs-templates/webpack/issues/349?

Webstorm and phpstorm would have this setting. It did the trick for me.

[AndrewBogdanovTSS]

@patrickodacre yes I tried that, but it didn't change anything, it's not working as before.

[AndrewBogdanovTSS]

Damn, I've found what the problem was. I used square brackets [] in the projects directory path. How stupid is that? My path was
C:\Projects\Study\[Vue]\VueCLI\my-app
when I've changed it to
C:\Projects\Study\Vue\VueCLI\my-app
it magically started working
it definitely looks like a bug that should be addressed by a webpack team

[esttres]

Same issue with parenthesis and spaces in file names. My path was
C:\Section\ Code\ \(Start\) - Don't hate me, it was from a tutorial
changed it to
C:\SectionCode
works great now!

[markko1]

Same issue with running Vue inside Docker container in Win10.
WatchOptions helped!

[abods]

Same issue no hot reload :(

[NiceGuyNimni]

Had the same issue.
@chmln helped me out with the WatchOptions code example.
Tnx man!!!

[jaryroxas]

same issue
@chmln 's method works 👍

[albttx]

@chmln methods fix hot-reloading for docker

[JJEEGG2211]

wow. just wanted to say i can't believe removing the parentheses fixed the issue for.

Thanks!

[bradocchs]

watchOptions fixed it for me too and I have my project in Dropbox. Thanks!

[LinusBorg]

For future visitors: The "WatchOptions" config is now reachable in the template's config/index.js in the form of the pollproperty. Setting that to true will switch polling on in the dev-server's watchOptions.

https://github.com/vuejs-templates/webpack/blob/develop/template/config/index.js#L21

[dimitrisnl]

@LinusBorg Awesome, thank you

[tannguyen3489]

@LinusBorg Awesome, thank you so much

[ashwinkk]

@LinusBorg That worked. Thanks.

[thanhtungka91]

for me reinstall vuecli, webpack was running well
npm install -g vue-cli

[ashishmit14]

I was having the same issue with vue-cli-3. I was using CORS extension on chrome. Disabled it and that did the trick.

[craigpryde]

Abit late to the party, Will hopefully save someone a few minutes in the future.

In my case, I had a directory called "shared" (components/shared) and I was using the upper case as a name for the folder in my imports: "import Hello from './int-src/app/components/Shared/Hello.vue'.

By referencing the folder as "Shared" instead of "shared" webpack would compile the Vue file initially but would not detect changes within the file. I renamed the folder "Shared" and everything is back to normal.

[gnanesdct]

Me too have the same issue. after a day spent, I found a solution that in the config folder, I have an index.js file. In that file, I have changed the poll value to true which enable the watch options and now works fine.

https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

[scottc11]

I had to tweak one of the above answers by @chmln for my own use case but this finally worked for me. Using [email protected]

module.exports = {
  //...
  watch: true,
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
};

[grafikri]

I think folder name first letter should be lowercase. i had same problem and when i save a file component changed but when i save another file component not changed.

I saw folder name that first letter uppercase that component inside the folder . I change first letter of folder name to lowercase and it worked.

non-working file path
src/section/Chat/UserInfo.vue

working file path
src/components/UserInfoListItem.vue

src/section/Chat/UserInfo.vue path will be src/section/chat/UserInfo.vue

this is worked for me

Sorry for my english.

[misrab]

same issue
@chmln 's method works +1

[mdshoeb01]

Maybe somehow the files which were tracking your project changes which webpack looks for got corrupted.
You can create them again just by following simple steps.
1) come out of your project dir. ($: cd ..)
2) move your project to different directory ($: mv {projectName} {newName})
3) go into the new dir ($: cd {newName})
4) start the server and check if it reloads on every file change (it should work in most cases, because now webpack creates new files to watch for changes)
5) come out of the dir ($: cd ..)
6) move it back to its original name ($: mv {newName} {projectNam})
This worked for me............

[everttrollip]

Well, that took a while...

So, somewhere along the line I installed webpack with npm in my project that I created with vue-cli. I think I did this when I edited my vue.config.js and added the require('webpack'). My linter was complaining that webpack needs to be listed in the project's dependencies, but my project runs fine when it is served.

After removing the webpack dependency from the package.json, deleting the node_modules AND the package-lock.json and re-running npm install, hot-reload started working for me again.

Can someone comment on this behaviour to help me understand why I shouldn't install webpack? Because vue-cli is doing this for us in the background?

Here is my vue.config.js:

const webpack = require('webpack');
process.env.VUE_APP_VERSION = require('./package.json').version;

module.exports = {
  configureWebpack: {
    devServer: {
      disableHostCheck: true,
      watchOptions: {
        poll: true,
      },
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          USERS_URL: JSON.stringify(`${process.env.VUE_APP_PROTOCOL}://${process.env.VUE_APP_HOST_CAREERTEAM_ID_SERVICE}:${process.env.VUE_APP_PORT_CAREERTEAM_ID_SERVICE}${process.env.VUE_APP_ROUTE_PREFIX}`),
        },
      }),
    ],
  },
};

Here is my terminal output after running the linter:

> vue-cli-service lint

error: 'webpack' should be listed in the project's dependencies. Run 'npm i -S webpack' to add it (import/no-extraneous-dependencies) at vue.config.js:1:17:
> 1 | const webpack = require('webpack');
    |                 ^
  2 | process.env.VUE_APP_VERSION = require('./package.json').version;
  3 | 
  4 | module.exports = {


1 error found.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: `vue-cli-service lint`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/evert/.npm/_logs/2019-04-10T13_37_30_574Z-debug.log`

Note also, that after running npm ls webpack when the node_modules were re-created, that there are a few "UNMET DEPENDENCY" npm errors. Should I ignore this then? 

├─┬ @vue/[email protected]
│ └── UNMET DEPENDENCY [email protected] 
├─┬ @vue/[email protected]
│ └── UNMET DEPENDENCY [email protected] 
└─┬ @vue/[email protected]
  └── UNMET DEPENDENCY [email protected] 

npm ERR! missing: [email protected], required by @vue/[email protected]
npm ERR! missing: [email protected], required by @vue/[email protected]
npm ERR! missing: [email protected], required by @vue/[email protected]

[braingraze]

I had the same issue where all files except files/directories in @/components directory were hot reloaded. Did some troubleshooting and found that @/components directories/filenames need to be in Pascal case. As soon as I renamed header to Header, hot reload worked as expected. Must be in a deep config file.

[oliveremi]

@braingraze on my side I just realized that some import where using the wrong case and it was causing hot reload not to work while serving the project still was working fine. Once I made sure imports cases were right it worked again 👍

[michelpl]

I have removed my node_modules folder and package-lock.json and this worked for me.

[shortpoet]

Same issue with running Vue inside Docker container in Win10.
WatchOptions helped!

Thank you for this comment. This also helped me with my Docker Win10 issue.

[ajaymarathe]

I had to tweak one of the above answers by @chmln for my own use case but this finally worked for me. Using [email protected]

module.exports = {
  //...
  watch: true,
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
};

It's working, just add this code in your vue.config.js,