filewatcher-webpack-plugin
filewatcher-webpack-plugin copied to clipboard
sap9433
Webpack v4 compatibility issue?
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;
};
Same issue reported with Webpack v4 in a similar plugin: https://github.com/Fridus/webpack-watch-files-plugin/issues/6
You cant have 2 app.js .
On Wed, May 2, 2018, 07:49 Chris Ashton [email protected] 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 .
For webpqck, entry point will always be 1.
On Wed, May 2, 2018, 10:20 Saptarshi Chatterjee < [email protected]> wrote:
You cant have 2 app.js .
On Wed, May 2, 2018, 07:49 Chris Ashton [email protected] 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 .
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).
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.
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.
@sap9433 considering you wrote this code, don't you think you would be best suited for the job?
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.
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: {} }
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'
]
})
]
};
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.
