ConcurrentCompilationError: You ran Webpack twice

[notiv-nt]

• Operating System: MacOS 10.14.5 (18F203)
• Node Version: 10.15.3
• NPM Version: 6.4.1
• webpack Version: 4.31.0
• webpack-dev-middleware Version: used in webpack-dev-server

Context

docker, webpack-dev-server , lazy: true

Error itself:

ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
    at Compiler.run (/client/node_modules/webpack/lib/Compiler.js:211:37)
    at rebuild (/client/node_modules/webpack-dev-middleware/lib/context.js:81:24)
    at done (/client/node_modules/webpack-dev-middleware/lib/context.js:59:7)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/client/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at AsyncSeriesHook.lazyCompileHook (/client/node_modules/tapable/lib/Hook.js:154:20)
    at emitRecords.err (/client/node_modules/webpack/lib/Compiler.js:267:22)
    at Compiler.emitRecords (/client/node_modules/webpack/lib/Compiler.js:449:39)
    at emitAssets.err (/client/node_modules/webpack/lib/Compiler.js:261:10)
    at hooks.afterEmit.callAsync.err (/client/node_modules/webpack/lib/Compiler.js:435:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/client/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/client/node_modules/tapable/lib/Hook.js:154:20)
    at asyncLib.forEachLimit.err (/client/node_modules/webpack/lib/Compiler.js:432:27)
    at /client/node_modules/neo-async/async.js:2818:7
    at done (/client/node_modules/neo-async/async.js:3522:9)
    at MemoryFileSystem.writeFile (/client/node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
    at writeOut (/client/node_modules/webpack/lib/Compiler.js:415:30)

https://github.com/webpack/webpack/blob/master/lib/Compiler.js#L211

I still can not find the reason for this error, its very hard to catch, but found a solution:

https://github.com/notiv-nt/webpack-dev-middleware/commit/9a7ce044682aca870061f7352377c4fdc8545ff8

https://github.com/webpack/webpack-dev-middleware/blob/9f8f9471411ddf9e882f7c83c85325b5cb324216/lib/context.js#L57-L60

This code throws an error, when I reload the page during the build, sure this lines are needed?

[alexander-akait]

Please create minimum reproducible test repo, i think you have something wrong in setup, you should not run webpack twice as error said

[notiv-nt]

this is the problem that everything works in the "minimal version" but ill try

[notiv-nt]

I think i found it https://github.com/notiv-nt/webpack-dev-lazy

yarn start

open localhost:8090

open console, and paste

fetch('/bundle.js');fetch('/bundle.js');

error appears when a file is requested 2 times at the same time, but in the work, in the docker container, I cannot control requests, although only a bundle.js is requested.

[alexander-akait]

Why you use lazy? Can you describe use case?

[notiv-nt]

hmr too heavy + there are multiple client's if I start all services at the beginning (hmr), and not on request, everything will very slow down

[notiv-nt]

• docker's I/O on macos SOOOO slow

[alexander-akait]

hm, looks like a bug, feel free to send a PR

[notiv-nt]

just comment this? https://github.com/webpack/webpack-dev-middleware/blob/9f8f9471411ddf9e882f7c83c85325b5cb324216/lib/context.js#L57-L60

[alexander-akait]

Not sure, i think problem deeply, need investigate

[notiv-nt]

I dont know, but just placing this code inside process.nextTick solves this problem. I've tested

[anikethsaha]

is bundle.js the one you are requesting is present in your public folder cause in the repo you mentioned its not there and It seems an error is obvious if its not there which is happening. I tried to repro the case and I placed bundle.js inside the public and its working fine.

[notiv-nt]

@anikethsaha bundle.js — webpack's output file

[anikethsaha]

That is quite obivious after seeing your config file. But what I meant was its not been created after running your repo. If its help can you manually create that and check. I knw it sud be created automatically but for just for test being can you do that

[notiv-nt]

@anikethsaha

I meant was its not been created after running your repo

Because its webpack's bundlee file, what should it do in public?

If its help can you manually create that and check

what is it for? the problem is generally in compilation

[anikethsaha]

Actually weirdly it was not creating. And I think it's not in compilation it's in the fetch argument. Let's wait for others and discuss this in the PR to see if it workout.

[alexander-akait]

@anikethsaha yep, it is invalid solution, we should search other way to solve this problem, any ideas?

[notiv-nt]

I don’t understand what you are saying. Your plugin crashes. What is the public folder? What are you talking about? The problem in COMPILATION

ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.

Actually weirdly it was not creating

This is dev server. And this file should not be created in public

[anikethsaha]

This is dev server

oops .. my bad 😁 I couldn't able to reproduce the error, it's surely something to do with Docker as you mentioned ! am not much into docker, so I am not really able to debug it

The problem in COMPILATION

I meant problem is in the env which is leading to this error

[notiv-nt]

Ok, same error without docker.

1. Clone https://github.com/notiv-nt/webpack-dev-lazy
2. install packages
3. yarn start
4. open http://localhost:8090/
5. see error

<script>
  fetch('/bundle.js');
  fetch('/bundle.js');
</script>

I dont know how and where, but in real project i have only one entry file

<script src="/assets/js/bundle.js"></script>

But the same error appears, possibly due to the multitude of asynchronous modules

[alexander-akait]

@notiv-nt it is appears only in docker, right?

[notiv-nt]

Deleting these 4 lines solves the problem for me. I do not know how for others

if (context.forceRebuild) {
  context.forceRebuild = false;
  rebuild();
}

[anikethsaha]

https://github.com/webpack/webpack-dev-middleware/issues/409#issuecomment-504957820 It's working fine for me, !!!!

[alexander-akait]

I want clarify what it is happens only in docker, somebody can give feedback?

[notiv-nt]

@evilebottnawi not only in docker

➜  webpack-dev-lazy git:(master) yarn start
yarn run v1.16.0
warning package.json: No license field
$ ./node_modules/.bin/webpack-dev-server --config webpack.config.js
ℹ ｢wds｣: Project is running at http://localhost:8090/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/nt/Documents/GitHub/webpack-dev-lazy/public
ℹ ｢wdm｣: wait until bundle finished: /bundle.js
ℹ ｢wdm｣: wait until bundle finished: /bundle.js
ℹ ｢wdm｣: wait until bundle finished: /favicon.ico
✖ ｢wdm｣: ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
    at Compiler.run (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/webpack/lib/Compiler.js:211:37)
    at rebuild (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/webpack-dev-middleware/lib/context.js:81:24)
    at done (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/webpack-dev-middleware/lib/context.js:59:7)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/tapable/lib/Hook.js:154:20)
    at emitRecords.err (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/webpack/lib/Compiler.js:267:22)
    at Compiler.emitRecords (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/webpack/lib/Compiler.js:449:39)
    at emitAssets.err (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/webpack/lib/Compiler.js:261:10)
    at hooks.afterEmit.callAsync.err (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/webpack/lib/Compiler.js:435:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/nt/Documents/GitHub/webpack-dev-lazy/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)

[anikethsaha]

@notiv-nt is your src/index.js is having some content or its just empty as in the repo you mentioned ?

[notiv-nt]

1:1 like in repo

[notiv-nt]

webpack.config.js

const path = require('path');

module.exports = {
  context: path.resolve(__dirname, './'),
  entry: './src/index.js',

  output: {
    filename: 'bundle.js',
    path: '/',
  },

  devServer: {
    port: 8090,
    contentBase: path.resolve(__dirname, 'public'),
    lazy: true,
    filename: 'bundle.js',
  },
};

src/index.js

'empty'

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <script>
    fetch('/bundle.js');
    fetch('/bundle.js');
  </script>

</body>
</html>

[anikethsaha]

Its still working fine on my system

[notiv-nt]

Try to reload without cache ctrl+shift+r, if not, i dont know

[anikethsaha]

I did with clearing the cache already but it was working fine. Now I am on windows edge and Now the error is coming

[anikethsaha]

I would add this

  (async function(){
      await fetch('/bundle.js');
      await fetch('/bundle.js');
    })()

just to handle the requests Although not sure about the error type, I guess it should not be of type compilation error.

[KathiresanRamkumar95]

How did you fix this? @notiv-nt

[notiv-nt]

@KathiresanRamkumar95 https://github.com/notiv-nt/webpack-dev-middleware/commit/9a7ce044682aca870061f7352377c4fdc8545ff8

[KathiresanRamkumar95]

@notiv-nt Still I got the same error

[notiv-nt]

@KathiresanRamkumar95 ¯\_(ツ)_/¯ i havent

[Pixelatex]

The issue resolved itself by downgrading to ^3.1.14 instead of the latest version. Seems something changed in between those versions.

[lyz1991]

must be the api webpack of webpack4 is async,you should change the devmidware into callback

[wusiquan]

I encouter the same error, when I use webpack-dev-middleware with lazy: true option and webpack-hot-middleware. When a request come in, the value of context.state is false, and its hooks.done called before the last request's done hook, and the error occur. In my case the error always found between /__webpack_hmr and /app.bundle.js.map request.

Put the code below in the bottom of the process.nextTick callback function, can solve my problem.

// webpack-dev-middleware/context.js
if (context.forceRebuild) {
  context.forceRebuild = false;
  rebuild(callback);
}

The reason may be the webpack compiler hooks.done is a Hook type of AsyncSeriesHook. And wdm tap the hook, context.compiler.hooks.done.tap('WebpackDevMiddleware', done), so process.nextTick callback could wait for finalCallback called.

// webpack/Compiler.js
const finalCallback = (err, stats) => {
  this.running = false;
  // ...
})

this.hooks.done.callAsync(stats, err => {
  if (err) return finalCallback(err);
  return finalCallback(null, stats);
});

[alexander-akait]

PR welcome, also we need test(s)

[alexander-akait]

No need PR, lazy will be removed in next release, it is incompatibility approach for webpack and middleware

[alexander-akait]

lazy was removed for next release

[ewolfe]

When is the next release expected to come out?

[ygddgithub]

I got the same question when I use the webpack-dev-server boot my project

` [webpack-dev-middleware] ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.

at Compiler.watch (C:\Users\worker\Desktop\zzy\package\test\node_modules\webpack\lib\Compiler.js:411:19)` My code: ` **complier.run((err,stat)=>{ err && console.log(err) })** let ServerConfig:ServerConfiguration = { host:"127.0.0.1", port:3000, hot:true, open:false, } const devServer = new WebpackDevServer(ServerConfig,complier) devServer.start() devServer.stopCallback(()=>{ console.log("serverstop") })` stack top info ----I use complier twice ,so I check my code find the "complier.run((err,stat)=>{ err && console.log(err) }) " is extra . just delete it .

[nisimjoseph]

I am also getting the error: ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time. when I run 2, or more, Webpack configurations as described here.

I use webpack serve and I see it each time.

All the configuration are running on the same project, but with different bundle builds configurations.

[alexander-akait]

@nisimjoseph Can you creatre reproducible test repo?

[trusktr]

I get this error with webpack 5, dev server 4. Here's a reproduction:

git clone git@github.com:lume/harp-terrain-datasource.git
cd harp-terrain-datasource
git checkout webpack-issue-409
cd example
npx yarn install
npx yarn start # shows error in the output

[alexander-akait]

@trusktr There are no problems with webpack-dev-middleware, problems with CLI and dev server, we have an issue about it