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

[felipero]

After a fresh install of webpack 4.4.1 and mini-css-extract-plugin I'm getting this error:

  ERROR in   Error: Child compilation failed:
  Module build failed: TypeError: this[NS] is not a function

  - loader.js:147 childCompiler.runAsChild
    [kickante_front]/[mini-css-extract-plugin]/dist/loader.js:147:15

My configuration file looks like this:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env = {}) => {
  const isProduction = env.production === true;

  return {
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: "[id].css"
      }),
      new HtmlWebpackPlugin({
        title: 'wp4test',
        template: 'src/index.html',
        minify: {
          html5: true,
          removeComments: isProduction,
          collapseWhitespace: isProduction,
          preserveLineBreaks: true,
          decodeEntities: true,
        },
      })
    ],
    module: {
      rules: [
        {
          test: /\.(scss|sass|css)$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                outputPath: '/images/',
                name: '[name].kick.[hash:8].[ext]',
              },
            },
          ],
        },
      ]
    }
  }
};

The line with error is this:

this[NS](text);

And the value of NS is:

/Users/felipero/workspace/learning_experiments/wp4test/node_modules/mini-css-extract-plugin/dist

Any ideas of what it could be?

[nicksrandall]

I'm not sure if this will help but I was getting this error only on my dev builds because I was only adding the plugin on prod even though both prod and dev were both using the loader.

[felipero]

@nicksrandall what do you mean by adding to prod? Do you mean adding to "dependencies" instead of "devDependencies"?

If so, I tried here and it didn't work.

[felipero]

I found out something that It might help. this[NS] is undefined when requiring from HTML, like that: <link rel="stylesheet" type="text/css" href="<%=require('./main.css')%>" />

NS still have the same value, but this won't have the key.

[nurbek-ab]

what do you mean by adding to prod? Do you mean adding to "dependencies" instead of "devDependencies"?

No, he means that he added the plugin to production config of webpack leaving out the development config. Adding the plugin to a common config shared across prod and dev configs would solve the problem.

[nurbek-ab]

@felipero Add it to both prod and dev configs.

[felipero]

@nurbek-ab On my example over there, that config is the common config between dev and prod. Which means it is already added to both dev and prod. The issue for me is when I require it directly from the html.

[nurbek-ab]

@felipero I am not sure if it helps but try to update webpack to 4.5.0

[felipero]

@nurbek-ab Did it already. Didn't solve either. I just tried again and whenever I add a require to the index.html it breaks. Worth mention that I'm using the HtmlWebpackPlugin.

[Apostata]

Same here

[tim-soft]

I had this issue when using less-loader down the chain, adding the javascriptEnabled: true fixed it for me, not sure if related

{
    loader: "less-loader",
    options: {
        modifyVars: antThemeVars,
        javascriptEnabled: true
    }
}

[alexander-akait]

It is bug, feel free to fix it

[alexander-akait]

Bug happens when you add loader, but don't add plugin