devServer before option to watch files with chokidar

[merijnponzo]

Hello,

I'm trying to watch certain php and twig files in my app file (this is a non symfony project)

Within devServer I should be able to use the before option to add chokidar for watching files.

Within the top of my webpack.config.js

const chokidar = require("chokidar");

And below

Encore.configureDevServerOptions((options) => {
  options.before = (app, server) => {
    const files = ["app/**/*.php", "app/**/*.twig"];
    chokidar
      .watch(files, {
        alwaysStat: true,
        atomic: false,
        followSymlinks: false,
        ignoreInitial: true,
        ignorePermissionErrors: true,
        persistent: true,
        usePolling: true,
      })
      .on("all", () => {
        server.sockWrite(server.sockets, "content-changed");
      });
  };
});
module.exports = Encore.getWebpackConfig();

This gives me the error:

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'before'. These properties are valid:
   object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, injectClient?, injectHot?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, proxy?, public?, setupExitSignals?, static?, stdin?, transportMode?, useLocalIp? }

Within my 'normal' (without symfony encore) webpack config this is working However, within my webpack config I add 'before' within the devServer object

devServer: {
      before(app, server) {
        const files = ["app/**/*.php", "app/**/*.twig"];
        chokidar

Either, how can I get this thing to work. Or how can i watch files within my app folder

root: webpack.config.js

• app
• • php files
• • twig files

thanks

[Kocal]

Hi,

It looks like your code was for webpack-dev-server 3. However, Encore 1.x use webpack-dev-server 4 and it does not work anymore, before was renamed to onBeforeSetupMiddleware , see https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#400-beta0-2020-11-27.

There is no documentation yet, but you take a look to https://github.com/webpack/webpack-dev-server/blob/master/test/server/onBeforeSetupMiddleware-option.test.js to see how it works.

The implementation is here: https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L346, it take one argument which is an instance of Server, so I guess you should use something like this now:

Encore.configureDevServer(options => {
  options.onBeforeSetupMiddleware  = (server) => {
    const files = ["app/**/*.php", "app/**/*.twig"];
    chokidar
      .watch(files, {
        alwaysStat: true,
        atomic: false,
        followSymlinks: false,
        ignoreInitial: true,
        ignorePermissionErrors: true,
        persistent: true,
        usePolling: true,
      })
      .on("all", () => {
        server.sockWrite(server.sockets, "content-changed");
      });
  };
});