BrowserSync Not Watching Changes in Docker for Windows

sage
, ,
1

Hello,

This issue is in regards to sage 9.0.0-beta.4 and Docker for Windows.

Up to this point I’ve been using Sage 9 inside Docker for Mac containers and it’s been running well. I’m looking to expand its usage to a few of my team members and in doing so I’ve begun testing different environments, specifically Docker for Windows.

File changes are not seen or compiled in Docker for Windows unless they originate from within the container. This suggests a polling issue.

I initially added polling support to the Webpack configuration but it did not fix the problem. After some additional tinkering I found that the problem does not originate with Webpack core but instead from either browsersync-webpack-plugin or one of its dependencies.

If you remove BrowserSyncPlugin from the watch configuration then Webpack will successfully compile new changes provided that polling support is added to Webpack’s watchOptions. This means that you have to manually reload the page to see those changes, so it’s not the end of the world; however, BrowserSyncPlugin definitely improves the development experience and it would be nice to have.

The browsersync-webpack-plugin library allows you to pass in additional BrowserSync options, and if given a watchOptions object (separate from Webpack’s watchOptions object) then BrowserSync will pass those options to Chokidar, its fs event system wrapper. Chokidar will poll for changes only if provided a ‘usePolling: true’ property.

I suspect that this is where the issue lies. Has anyone experienced a similar issue and found the solution? I’ve included the usePolling property inside the BrowserSyncPlugin object to no avail.

webpack.config.watch.js:

  ...
  watchOptions: {
    poll: 1000,
  },
  ...
    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
      advanced: {
        browserSync: {
          watchOptions: {
            usePolling: true,
          },
        },
      },
    }),

Docker images:
wordpress:4.9.1-php7.2-apache, mysql:5.7.20

3 Likes
2

I use native Docker in Windows 10 and I’ve encountered same issue as you. the watch doesn’t work when sharing volume in Docker. I wanted to enable polling watch but I don’t know where I configure that.

browsersync-webpack-plugin doesn’t mention where to configure watchOptions, so I walked through browsersync-webpack-plugin code source to figure out from where it picks WatchOptions params.
Finally, I needed to add this config

  devServer: {
    watchOptions: {
      poll: true
    }
  }

webpack.config.watch.js will look like:

module.exports = {
  devServer: {
    watchOptions: {
      poll: true
    }
  },
  output: {
    pathinfo: true,
    publicPath: config.proxyUrl + config.publicPath,
  },
  devtool: '#cheap-module-source-map',
  stats: false,
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
    }),
  ],
};