Why doesn't Webpack-Dev-Server (inside docker container) detect file changes when used with a new Vue.js CLI Webpack Template Project?

0
votes

When starting a new Vue.js Webpack template project from the terminal with the Vue CLI (I did this inside a docker webpack container that I built with Vue CLI installed) using the documented startup commands (found in the repo here: https://github.com/vuejs-templates/webpack) my webpack-dev-server does not detect changes to my files.

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Once the webpack-dev-server comes up listening on 0.0.0.0:8080 I can access the the server and I see the proper vue project sample rendered in the browser. HOWEVER when I change one of the files, the webpack server compilation status (container command line / logs) does not update and no changes are visible in the browser.

I saw someplace that sometimes webpack will have trouble if a directory it is attempting to monitor has additional characters attached to it but that does not appear to be the case when I do:

$ ls

Previously I had this entire setup working with this exact container and this exact project, so I know it doesn't have to do with running inside of a docker container.

I ran into this issue when attempting to write up the documentation to help our team launch a new project when necessary.

2
dockerwebpackvue.jswebpack-dev-server

2 Answers

0
votes

I also ran into this issue when initializing the app with vue-cli on my Windows machine. You can fix the issue by updating webpack from 1.13.2 (shipped with vue-cli) to 1.14.0.

Edit: Seems like it didn't work entirely. Another solution that does seem to work across all files is to add new webpack.OldWatchingPlugin() as an additional plugin in webpack.dev.conf.js.

0
votes

It seems that some Docker containers do not support native file watchers which leads to problems detecting file changes. You can solve this by using the active polling mechanism from the webpack dev server. You should only activate this if the devServer is not reacting to changes:

vue.config.js

module.exports = {
  devServer: {
    watchOptions: {
      poll: true, // or use an integer for a check every x milliseconds, e.g. poll: 1000,
      ignored: /node_modules/ // otherwise it takes a lot of time to refresh
    }
  }
};

source: documentation webpack watchOptions

If you are also using nodemon in the back-end part and having the same issue there, you can solve it by using the --legacy-watch flag (short -L) which starts polling too.

npm exec nodemon -- --legacy-watch --watch src src/main.js

or in package.json:

"scripts": {
  "serve": "nodemon --legacy-watch --watch src src/main.js"
}

documentation: nodemon legacy watch