New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hot Reload not responding to changes on components #378

Closed
libnull opened this Issue Nov 22, 2016 · 29 comments

Comments

Projects
None yet
@libnull
Copy link

libnull commented Nov 22, 2016

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

This comment has been minimized.

Copy link

chmln commented Nov 27, 2016

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

This comment has been minimized.

Copy link

valZho commented Nov 28, 2016

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

This comment has been minimized.

Copy link

patrickodacre commented Nov 29, 2016

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: #349

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

@chmln

This comment has been minimized.

Copy link

chmln commented Nov 29, 2016

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

This comment has been minimized.

Copy link

patrickodacre commented Nov 29, 2016

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

@valZho

This comment has been minimized.

Copy link

valZho commented Nov 29, 2016

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

@LinusBorg LinusBorg closed this Dec 5, 2016

@AndrewBogdanovTSS

This comment has been minimized.

Copy link

AndrewBogdanovTSS commented Feb 5, 2017

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

This comment has been minimized.

Copy link

patrickodacre commented Feb 5, 2017

Have you tried this #349?

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

@AndrewBogdanovTSS

This comment has been minimized.

Copy link

AndrewBogdanovTSS commented Feb 7, 2017

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

@AndrewBogdanovTSS

This comment has been minimized.

Copy link

AndrewBogdanovTSS commented Feb 7, 2017

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

This comment has been minimized.

Copy link

esttres commented Mar 6, 2017

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

This comment has been minimized.

Copy link

markko1 commented Apr 2, 2017

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

@abods

This comment has been minimized.

Copy link

abods commented Apr 5, 2017

Same issue no hot reload :(

@NiceGuyNimni

This comment has been minimized.

Copy link

NiceGuyNimni commented May 29, 2017

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

@jaryroxas

This comment has been minimized.

Copy link

jaryroxas commented Jul 21, 2017

same issue
@chmln 's method works 👍

@albttx

This comment has been minimized.

Copy link

albttx commented Oct 3, 2017

@chmln methods fix hot-reloading for docker

@JJEEGG2211

This comment has been minimized.

Copy link

JJEEGG2211 commented Oct 12, 2017

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

Thanks!

@bradocchs

This comment has been minimized.

Copy link

bradocchs commented Nov 27, 2017

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

@LinusBorg

This comment has been minimized.

Copy link
Contributor

LinusBorg commented Nov 27, 2017

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

This comment has been minimized.

Copy link

dimitrisnl commented Nov 29, 2017

@LinusBorg Awesome, thank you

VadimCpp added a commit to VadimCpp/gsgusev.ru that referenced this issue Dec 17, 2017

@tannguyen3489

This comment has been minimized.

Copy link

tannguyen3489 commented Feb 21, 2018

@LinusBorg Awesome, thank you so much

@ashwinkk

This comment has been minimized.

Copy link

ashwinkk commented Feb 25, 2018

@LinusBorg That worked. Thanks.

@thanhtungka91

This comment has been minimized.

Copy link

thanhtungka91 commented Apr 9, 2018

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

@ashishmit14

This comment has been minimized.

Copy link

ashishmit14 commented Sep 15, 2018

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

This comment has been minimized.

Copy link

craigpryde commented Sep 17, 2018

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

This comment has been minimized.

Copy link

gnanesdct commented Sep 23, 2018

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

This comment has been minimized.

Copy link

scottc11 commented Nov 21, 2018

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

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

This comment has been minimized.

Copy link

grafikri commented Nov 24, 2018

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

This comment has been minimized.

Copy link

misrab commented Jan 1, 2019

same issue
@chmln 's method works +1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment