Webpack v4 compatibility issue?

[ChrisBAshton]

Hi,

When I run webpack-dev-server it compiles fine, but when I save a file that is being watched by this plugin, I get the following error:

Compilation Started  after change of - source/app/vocabs/english.json

node_modules/filewatcher-webpack-plugin/index.js:45
              if (err) throw err;
                       ^

ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
    at Compiler.run (node_modules/webpack/lib/Compiler.js:149:37)

It may be because I'm compiling multiple JS files at a time, or it could be that I'm using Webpack v4...? Here is my Webpack config:

const webpackConfig = {
        entry: {
            'app': `./source/app/app.js`,
            'widget': `./source/widget/app.js`,
        },
        output: {
            path: path.resolve(__dirname, `${config.outputDir}/assets/`),
            publicPath: `${config.outputDir}/assets/`,
            filename: '[name].js',
            libraryTarget: `amd`,
        },
        devServer: {
            contentBase: __dirname,
            compress: true,
            port: 1031,
            disableHostCheck: true,
            host: `0.0.0.0`, // needed for hot reloading to work (binds to all hosts)
            https: {
                key: fs.readFileSync(`${pathToCerts}/device.key`),
                cert: fs.readFileSync(`${pathToCerts}/${root_domain}.crt`),
            },
            before: beforeCompile, // function defined earlier in file
            after: afterCompile, // function defined earlier in file
        },
        mode: (shell && shell.NODE_ENV) ? shell.NODE_ENV : `development`,
        module: {
            rules: [{
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['env', {
                            targets: {
                                browsers: ['ie 9'],
                            },
                            useBuiltIns: true,
                            loose: true,
                        }]],
                    },
                },
            }],
        },
        externals: [
            'vocab',
            'wrapper',
        ],
        plugins: [
            new filewatcherPlugin({watchFileRegex: ['**/vocabs/*.json']}),
        ],
    };
    return webpackConfig;
};

[ChrisBAshton]

Same issue reported with Webpack v4 in a similar plugin: https://github.com/Fridus/webpack-watch-files-plugin/issues/6

[sap9433]

You cant have 2 app.js .

On Wed, May 2, 2018, 07:49 Chris Ashton notifications@github.com wrote:

Same issue reported with Webpack v4 in a similar plugin: Fridus/webpack-watch-files-plugin#6 https://github.com/Fridus/webpack-watch-files-plugin/issues/6

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/sap9433/filewatcher-webpack-plugin/issues/7#issuecomment-385966275, or mute the thread https://github.com/notifications/unsubscribe-auth/AEI_phuz2XRO3fubTEcz1_brnZy0gNKAks5tuatcgaJpZM4TTgHg .

[sap9433]

For webpqck, entry point will always be 1.

On Wed, May 2, 2018, 10:20 Saptarshi Chatterjee < saptarshichatterjee1@gmail.com> wrote:

You cant have 2 app.js .

On Wed, May 2, 2018, 07:49 Chris Ashton notifications@github.com wrote:

Same issue reported with Webpack v4 in a similar plugin: Fridus/webpack-watch-files-plugin#6 https://github.com/Fridus/webpack-watch-files-plugin/issues/6

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/sap9433/filewatcher-webpack-plugin/issues/7#issuecomment-385966275, or mute the thread https://github.com/notifications/unsubscribe-auth/AEI_phuz2XRO3fubTEcz1_brnZy0gNKAks5tuatcgaJpZM4TTgHg .

[ChrisBAshton]

Hmmm the docs allow multiple entrypoints: https://webpack.js.org/configuration/entry-context/#entry

Everything else works fine out of the box (individual runs of webpack, or webpack-dev-server without this plugin).

[heyflo]

I'm having the exact same issue, same error, almost the same config 🦄

[retnag]

I had the same issue, running webpack without the --watch option did the trick. Now it rebuilds on filechanges as I would expect, but it watches only the files/directories specified in the config for this plugin, it won't watch anythin that webpack would watch by default. You have to manually add those dirs to the config as well, to get to where you were before.

[hopperhuang]

i encouter the same bugs, when i write my component star kit code is here

i don't use webpack as a cli, but use it's apis. i use webpack to compile the files in example folder.

what i wonder is that, it's very strange for me to two wepback instance

in my code, every time i start another wacther, i will close the previous one..

code like below:

// compile example with webpack
let compiler;
if (env !== 'production') {
  compiler = webpack(webpackConfig);
}
let webpackWatcher;
const compileExample = () => {
  // close exist watcher
  if (webpackWatcher) {
    webpackWatcher.close();
  }
  // make a new watcher
  webpackWatcher = compiler.watch({
    // watch /example/src files
    aggregateTimeout: 300,
    ignored: /node_modules/,
    poll: undefined,
  }, (err, stats) => {
    // logger
    if (err || stats.hasErrors()) {
      console.log('error: ', err);
    } else {
      const logs = stats.toString ? stats.toString({ colors: true }) : 'waiting for watching ....';
      console.log(logs);

      // serve for dist
      startServer();
    }
  });
};

so, can some tell me why this will appear, when i save my files in a very high frequent.

[leifdejong]

@sap9433 can you update everyone on the progress with fixing this?

[sap9433]

PR please ..

[leifdejong]

@sap9433 considering you wrote this code, don't you think you would be best suited for the job?

[stokescomp]

Does this work with webpack 3? I am getting the same error mentioned above with webpack 4. I am using this: .addPlugin(new WatchFilePlugin({watchFolder: "templates/"})) and it fails with two instances of webpack running when I add this too: .addPlugin(new WatchFilePlugin({watchFolder: "templates/", watchExtension: "php"}))

ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time. at Compiler.run (C:\web\symfony-recipe-factory\node_modules\webpack\lib\Compiler.js:211:37) at EventEmitter. (C:\web\symfony-recipe-factory\node_modules\watchfile-webpack-plugin\index.js:17:18) at emitThree (events.js:136:13) at EventEmitter.emit (events.js:217:7) at C:\web\symfony-recipe-factory\node_modules\watch\main.js:155:22 at StatWatcher. (C:\web\symfony-recipe-factory\node_modules\watch\main.js:83:38) at emitTwo (events.js:131:20) at StatWatcher.emit (events.js:214:7) at StatWatcher._handle.onchange (fs.js:1452:10)

Here is my webpack.config.

{ context: 'C:\web\symfony-recipe-factory', entry: { app: './assets/js/app.js' }, mode: 'development', output: { path: 'C:\web\symfony-recipe-factory\public\build', filename: '[name].[contenthash:8].js', publicPath: '/build/', pathinfo: true }, module: { rules: [ [Object], [Object], [Object], [Object], [Object] ] }, plugins: [ MiniCssExtractPlugin { options: [Object] }, DeleteUnusedEntriesJSPlugin { entriesToDelete: [] }, ManifestPlugin { opts: [Object] }, LoaderOptionsPlugin { options: [Object] }, WebpackChunkHash { algorithm: 'md5', digest: 'hex', additionalHashContent: [Function] }, CleanWebpackPlugin { paths: [Array], options: [Object] }, DefinePlugin { definitions: [Object] }, { options: [Object], lastBuildSucceeded: false, isFirstBuild: true }, FriendlyErrorsWebpackPlugin { compilationSuccessInfo: [Object], onErrors: undefined, shouldClearConsole: false, formatters: [Array], transformers: [Array] }, AssetOutputDisplayPlugin { outputPath: 'public\build', friendlyErrorsPlugin: [Object] }, LiveReloadPlugin { options: {}, defaultPort: 35729, port: 35729, ignore: null, quiet: false, instanceId: 'e30f2961593c9640', delay: 0, lastHash: null, lastChildHashes: [], protocol: '', hostname: '" + location.hostname + "', server: null }, watchFilePlugin { options: [Object] }, AssetsWebpackPlugin { options: [Object], writer: [Function: queuedWriter] } ], optimization: { namedModules: true, chunkIds: 'named', runtimeChunk: 'single', splitChunks: { chunks: 'async' } }, devtool: 'inline-source-map', performance: { hints: false }, stats: { hash: false, version: false, timings: false, assets: false, chunks: false, maxModules: 0, modules: false, reasons: false, children: false, source: false, errors: false, errorDetails: false, warnings: false, publicPath: false, builtAt: false }, resolve: { extensions: [ '.wasm', '.mjs', '.js', '.json', '.jsx', '.vue', '.ts', '.tsx' ], alias: {} }, externals: {} }

[pitpit]

https://github.com/Fridus/webpack-watch-files-plugin is a good candidate to replace this plugin if you face this issue

const WatchFilesPlugin = require('webpack-watch-files-plugin').default;

module.exports = {
  //....
  plugins: [
    //...
    new WatchFilesPlugin({
      files: [
        './templates/*.nunjucks'
      ]
    })
  ]
};

[backflip]

I have switched to the afterPlugins hook in my fork: https://github.com/backflip/filewatcher-webpack-plugin/commit/d25d9d2fc5616b06e6bfaea116026656ef59b269

Not sure whether this works in any situation, but works fine for my use case.