Module build failed: TypeError: this[NS] is not a function

[kingda]

This happened when used it with HtmlWebpackPlugin.
Some Files were shown below：

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path')
module.exports = {
    entry:{
      index:'./index.js'
    },
    mode:'development',
    output:{
      path:path.resolve('./public')
    },
    module: {
      rules: [
        {
          test: /\.js?$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env',
                '@babel/preset-react',
              ]
            },
          },
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: { importLoaders: 1, minimize: true },
            }
          ]
        }
      ]
    },
    plugins:[
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css'
      }),
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'./temp.ejs'),
        chunks:['index'],
        inject: true,
        hash: true
      })
    ]
}

temp.ejs:

<%= require('./renderApp').prerender() %>

renderApp.js

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import './style.css';
const App = () => <div/>
exports.prerender = function () {
  return ReactDOMServer.renderToString(<App />)
}

when run webpack ，the errors are “ERROR in ./style.css

    Module build failed: TypeError: this[NS] is not a function
        at childCompiler.runAsChild (D:\nodejsRoot\nimo\development\frontend\node_modules\mini-css-extract-plugin\dist\loader.js:148:15)
        at compile (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compiler.js:240:11)
        at hooks.afterCompile.callAsync.err (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compiler.js:485:14)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:24:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\Hook.js:35:21)
        at compilation.seal.err (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compiler.js:482:30)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\Hook.js:35:21)
        at hooks.optimizeAssets.callAsync.err (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compilation.js:964:35)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\Hook.js:35:21)
        at hooks.optimizeChunkAssets.callAsync.err (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compilation.js:955:32)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\Hook.js:35:21)
        at hooks.additionalAssets.callAsync.err (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compilation.js:950:36)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\Hook.js:35:21)
        at hooks.optimizeTree.callAsync.err (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compilation.js:946:32)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\Hook.js:35:21)
        at Compilation.seal (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compilation.js:888:27)
        at hooks.make.callAsync.err (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compiler.js:479:17)
        at _err0 (eval at create (D:\nodejsRoot\nimo\development\frontend\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
        at _addModuleChain (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compilation.js:756:12)
        at processModuleDependencies.err (D:\nodejsRoot\nimo\development\frontend\node_modules\webpack\lib\Compilation.js:695:9)
        at _combinedTickCallback (internal/process/next_tick.js:131:7)
        at process._tickCallback (internal/process/next_tick.js:180:9)
     @ ./renderApp.js 7:0-22
     @ node_modules/html-webpack-plugin/lib/loader.js!./temp.ejs

I realized the key point of this problem was how to output ejs variable in the right way ? so help me to fix it . Thanks ~

[alexander-akait]

Duplicate #73

[kingda]

@evilebottnawi but i have add the new MiniCssExtractPlugin() to the plugins array ，but it still not work well.

[alexander-akait]

@kingda please create minimum reproducible test repo in issue above and ping me

[kingda]

@evilebottnawi show u ~ https://github.com/kingda/mini-css-extract-plugin-NS-bug/

[alexander-akait]

@kingda in todo list tomorrow

[alexander-akait]

@kingda Original problem jantimon/html-webpack-plugin#579, not related to this plugin, need fix it in html-webpack-plugin, feel free to create new issue in their repo and ping me. We can try to solve this, but maybe it will be hard.

[kingda]

@evilebottnawi fine,i will put a new issue on html webpack plugin, but i try to fix it exploring your code，the problem is that the loadercontext does not have the NS property when it complied with node target. so any other solution for the node environment?

[jantimon]

@evilebottnawi I don't know how this could be fixed inside the html-webpack-plugin

Could we use a weak map instead of this[ns] to share the plugin instance?

E.g.

const pluginInstances = new WeakMap();
// Setting
pluginInstances.set(mainCompiler, pluginInstance);
// Getting
pluginInstances.get(mainCompiler);

[tobdub-snce]

I still get this problem when trying to include a css file in a template using,

"html-webpack-plugin": "^4.0.0-beta.8"
"webpack": "^4.39.1",
"html-loader": "^0.5.5",
"mini-css-extract-plugin": "^0.8.0",