Misleading error, when used with `html-webpack-plugin`

[ogonkov]

• Operating System:
  macOS 10.15.2
• Node Version:
  v10.17.0
• NPM Version:
  6.11.3
• webpack Version:
  webpack@4.41.5
  webpack-cli@3.3.10
• mini-css-extract-plugin Version:
  mini-css-extract-plugin@0.9.0

Expected Behavior

Error thrown that lead to something meaningful (still not sure what actually goes wrong)

Actual Behavior

Thrown the error in some third-party lib

% npm run build -- --mode development

> example@1.0.0 build /Users/user/foo
> webpack "--mode" "development"

/Users/user/foo/node_modules/neo-async/async.js:16
    throw new Error('Callback was already called.');
    ^

Error: Callback was already called.
    at throwError (/Users/user/foo/node_modules/neo-async/async.js:16:11)
    at /Users/user/foo/node_modules/neo-async/async.js:2818:7
    at process._tickCallback (internal/process/next_tick.js:61:11)

Code

https://gist.github.com/ogonkov/2e23941414d6f0b3d5328bd80cba5674

How Do We Reproduce?

1. Checkout gist above
2. npm i
3. npm run build

[alexander-akait]

Looks like problem in HTMLWebpackPlugin

[ogonkov]

Without MCEP loader it works correctly, but didn't emit CSS chunk

[ogonkov]

@evilebottnawi should this config actually work? Or MCEP is not intended to emit CSS chunks together with HWP?

[alexander-akait]

@ogonkov i think something wrong in HWP, i will look at this in near future

[ogonkov]

Should i add this MCEP+HWP usage to tests?

[klesun]

CSS-related issues in html-webpack-plugin:

it's probably mini-css-extract-plugin issue

Issues in mini-css-extract-plugin:

it's probably html-webpack-plugin issue

[ogonkov]

I believe that importing same template from JS didn't throw error, so probably @evilebottnawi could be right here (still don't know how to debug this issue, to make sure).

[ogonkov]

At mini-css-extract-plugin@0.8.0 error is different:

Console output

% npm run build

> example@ build /Users/user/Projects/example
> webpack

Hash: 0b6c02dcf3c69eca1876
Version: webpack 4.41.5
Time: 633ms
Built at: 01/10/2020 8:55:50 AM
 2 assets
Entrypoint main = main.js
[0] ./src/index.js 35 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in   Error: Child compilation failed:
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  TypeError: this[MODULE_TYPE] is not a function
  
  - loader.js:170 childCompiler.runAsChild
    [isomorphic-example]/[mini-css-extract-plugin]/dist/loader.js:170:24
  
  - Compiler.js:343 compile
    [isomorphic-example]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 hooks.afterCompile.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 compilation.seal.err
    [isomorphic-example]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 hooks.optimizeAssets.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compilation.js:1423:35
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compilation.js:1414:32
  
  
  - index.js:321 taskRunner.run
    [isomorphic-example]/[terser-webpack-plugin]/dist/index.js:321:9
  
  - TaskRunner.js:48 TaskRunner.run
    [isomorphic-example]/[terser-webpack-plugin]/dist/TaskRunner.js:48:7
  
  - index.js:227 TerserPlugin.optimizeFn
    [isomorphic-example]/[terser-webpack-plugin]/dist/index.js:227:18
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1409 hooks.additionalAssets.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compilation.js:1409:36
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1405 hooks.optimizeTree.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compilation.js:1405:32
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1342 Compilation.seal
    [isomorphic-example]/[webpack]/lib/Compilation.js:1342:27
  
  - Compiler.js:675 compilation.finish.err
    [isomorphic-example]/[webpack]/lib/Compiler.js:675:18
  
  - Compilation.js:1261 hooks.finishModules.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compilation.js:1261:4
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1253 Compilation.finish
    [isomorphic-example]/[webpack]/lib/Compilation.js:1253:28
  
  - Compiler.js:672 hooks.make.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compiler.js:672:17
  
  
  - Compilation.js:1185 _addModuleChain
    [isomorphic-example]/[webpack]/lib/Compilation.js:1185:12
  
  - Compilation.js:1097 processModuleDependencies.err
    [isomorphic-example]/[webpack]/lib/Compilation.js:1097:9
  
  
  - TypeError: this[MODULE_TYPE] is not a function
  
  - compiler.js:79 childCompiler.runAsChild
    [isomorphic-example]/[html-webpack-plugin]/lib/compiler.js:79:16
  
  - Compiler.js:343 compile
    [isomorphic-example]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 hooks.afterCompile.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 compilation.seal.err
    [isomorphic-example]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 hooks.optimizeAssets.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compilation.js:1423:35
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [isomorphic-example]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
    [isomorphic-example]/[webpack]/lib/Compilation.js:1414:32
  
  
  - index.js:321 taskRunner.run
    [isomorphic-example]/[terser-webpack-plugin]/dist/index.js:321:9
  
  - TaskRunner.js:48 TaskRunner.run
    [isomorphic-example]/[terser-webpack-plugin]/dist/TaskRunner.js:48:7
  

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs 282 bytes {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
    [4] ./item.css 4.76 KiB {0} [built] [failed] [1 error]
        + 1 hidden module
    
    ERROR in ./item.css
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    TypeError: this[MODULE_TYPE] is not a function
        at childCompiler.runAsChild (/Users/user/Projects/example/node_modules/mini-css-extract-plugin/dist/loader.js:170:24)
        at compile (/Users/user/Projects/example/node_modules/webpack/lib/Compiler.js:343:11)
        at hooks.afterCompile.callAsync.err (/Users/user/Projects/example/node_modules/webpack/lib/Compiler.js:681:15)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/user/Projects/example/node_modules/tapable/lib/Hook.js:154:20)
        at compilation.seal.err (/Users/user/Projects/example/node_modules/webpack/lib/Compiler.js:678:31)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/user/Projects/example/node_modules/tapable/lib/Hook.js:154:20)
        at hooks.optimizeAssets.callAsync.err (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1423:35)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/user/Projects/example/node_modules/tapable/lib/Hook.js:154:20)
        at hooks.optimizeChunkAssets.callAsync.err (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1414:32)
        at _err0 (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
        at taskRunner.run (/Users/user/Projects/example/node_modules/terser-webpack-plugin/dist/index.js:321:9)
        at TaskRunner.run (/Users/user/Projects/example/node_modules/terser-webpack-plugin/dist/TaskRunner.js:48:7)
        at TerserPlugin.optimizeFn (/Users/user/Projects/example/node_modules/terser-webpack-plugin/dist/index.js:227:18)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/user/Projects/example/node_modules/tapable/lib/Hook.js:154:20)
        at hooks.additionalAssets.callAsync.err (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1409:36)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/user/Projects/example/node_modules/tapable/lib/Hook.js:154:20)
        at hooks.optimizeTree.callAsync.err (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1405:32)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/user/Projects/example/node_modules/tapable/lib/Hook.js:154:20)
        at Compilation.seal (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1342:27)
        at compilation.finish.err (/Users/user/Projects/example/node_modules/webpack/lib/Compiler.js:675:18)
        at hooks.finishModules.callAsync.err (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1261:4)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
        at AsyncSeriesHook.lazyCompileHook (/Users/user/Projects/example/node_modules/tapable/lib/Hook.js:154:20)
        at Compilation.finish (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1253:28)
        at hooks.make.callAsync.err (/Users/user/Projects/example/node_modules/webpack/lib/Compiler.js:672:17)
        at _err0 (eval at create (/Users/user/Projects/example/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
        at _addModuleChain (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1185:12)
        at processModuleDependencies.err (/Users/user/Projects/example/node_modules/webpack/lib/Compilation.js:1097:9)
        at process._tickCallback (internal/process/next_tick.js:61:11)
     @ ./index.ejs (./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs) 4:10-31
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--4-1!item.css:
        Entrypoint mini-css-extract-plugin = *
        [0] ./node_modules/css-loader/dist/cjs.js??ref--4-1!./item.css 67 bytes {0} [built]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! example@ build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the example@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-01-10T05_55_50_213Z-debug.log

[klesun]

Probably related: #73

[ogonkov]

Looks like problem mutated?

[ogonkov]

I believe bug (with misleading error) was introduced in #448

[ogonkov]

I believe that error thrown from webpack/lib/Compilation

https://github.com/webpack/webpack/blob/45ecebc9f0486c43efc7b56f2c31426d94a55264/lib/Compilation.js#L849

Callback is first called in catch on line 829, then in addModuleDependencies it called again around https://github.com/webpack/webpack/blob/45ecebc9f0486c43efc7b56f2c31426d94a55264/lib/Compilation.js#L1020

If i put console log on 1020 it shows that css file come here twice.

Second invocation is seems to come from loader child compiler callback invocation (redundant?)

[ogonkov]

@evilebottnawi did you have a chance to look to this issue?