Fails build with mini-css-extract-plugin

[prateekbh]

If mini-css-extract-plugin is added with this plugin, it gives the following error.

ERROR in ./style.css
    Module build failed: TypeError: this[NS] is not a function
        at childCompiler.runAsChild (/Users/prateekbh/projects/webpack-exp/node_modules/mini-css-extract-plugin/dist/loader.js:148:15)
        at compile (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compiler.js:242:11)
        at hooks.afterCompile.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compiler.js:487:14)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:15:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at compilation.seal.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compiler.js:484:30)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at hooks.optimizeAssets.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:966:35)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at hooks.optimizeChunkAssets.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:957:32)
        at _err0 (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
        at /Users/prateekbh/projects/webpack-exp/node_modules/uglifyjs-webpack-plugin/dist/index.js:334:11
        at _class.runTasks (/Users/prateekbh/projects/webpack-exp/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)
        at UglifyJsPlugin.optimizeFn (/Users/prateekbh/projects/webpack-exp/node_modules/uglifyjs-webpack-plugin/dist/index.js:253:16)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at hooks.additionalAssets.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:952:36)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at hooks.optimizeTree.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:948:32)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/Hook.js:35:21)
        at Compilation.seal (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:890:27)
        at hooks.make.callAsync.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compiler.js:481:17)
        at _err0 (eval at create (/Users/prateekbh/projects/webpack-exp/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
        at _addModuleChain (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:758:12)
        at processModuleDependencies.err (/Users/prateekbh/projects/webpack-exp/node_modules/webpack/lib/Compilation.js:697:9)
        at _combinedTickCallback (internal/process/next_tick.js:131:7)
        at process._tickCallback (internal/process/next_tick.js:180:9)
     @ ./index.js 3:0-22

As a first time plugin dev i have no idea what this means. Please help

[prateekbh]

@ev1stensberg by any chance you know this?

[developit]

Ooooh I have run into this. You can't use mini-css-extract-plugin in a child compiler. You have to manually exclude it from plugins when creating the child compiler instance.

[prateekbh]

ohk.. but then how will js compiled in a child compiler know about the css?

[prateekbh]

excluding might have worked... and made me realized that i know so less about webpack 😢

[evenstensberg]

It's an intense tool 😆

[prateekbh]

Exclusion works

[Hocoh]

Hi can you put the working code on the discussion hence we can figure out the modifications realized that have cured your program

[prateekbh]

Being a beginner, I forgot to send plugins in the SingleEntryPoint again.
https://github.com/prateekbh/babel-esm-plugin/blob/master/src/index.js#L31

This fixed my problem