Mini-css-extract-plugin: Module build failed: TypeError: this[NS] is not a function

Created on 30 Mar 2018  ·  49Comments  ·  Source: webpack-contrib/mini-css-extract-plugin

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?

patch bug

Most helpful comment

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

All 49 comments

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.

@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.

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.

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.

@felipero Add it to both prod and dev configs.

@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.

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

@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.

Same here

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
    }
}

It is bug, feel free to fix it

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

Also somebody can create minimum reproducible test repo with HtmlWebpackPlugin?

@nicksrandall thanks for this, I was accidentally blowing away the plugin portion of this in my dev setup via Object.assign and forgetting it's not a deep merge. User error, fixed for me.

In the case when you have included the plugin and are _not_ blowing it away, this seems to be an issue when the loader and the plugin are not coming from the same source. I have a case where I have abstracted away a lot of my configurations to be easily imported into various projects to make things easier to manage. I noticed that NS was set to the plugin's path, but the loader's path is on the this context. Since those paths are different, it cannot find the plugin's path within this and thus it is undefined.

I use Webpack 4.5 and I got this error as well. I fixed it by adding

module      : {
    rules: [
      ...,
      {
        test   : /\.(scss|css)$/,
        resolve: {extensions: [".scss", ".css"],},
        use    : [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader?sourceMap',
          'resolve-url-loader?sourceMap',
          'sass-loader?sourceMap',
        ]
      },
      ...
    ]
  },
plugins     : [
    ...
        new MiniCssExtractPlugin({
      filename: `styles/[name].css`
    }),
  ],

to my plugin section. I know that this was not the problem above... Just in case someone does the same mistake I did... :-)

@felipero
Yes, this happens when I only add loader. After added it to plugins too, it works.

@toBeTheLight Not sure I understood what you meant. In my example I added the loader AND the plugin: https://github.com/felipero/mini-css-extract-plugin-ns-bug/blob/master/webpack.config.js#L7

Could you clarify what you mean by added it to plugins too?

I had seen it mentioned on this thread. Still, I was stung by accidentally using the MiniCssExtractPlugin.loader without the plugin on my server build.

Details: I am using webpack to build both server and client. I have shared webpack config objects in one file. I was accidentally mutating the css loader object, adding the MiniCssExtractPlugin.loader to it on the client side webpack config. The client side does correctly add the new MiniCssExtractPlugin() to the plugins array. Since the object was mutated, the server would build with the MiniCssExtractPlugin.loader in the loader. My server config did not specify the new MiniCssExtractPlugin() in the plugins array. Fixing that mutation resolved the issue for me.

@felipero So you are able to reproduce with the plugin enabled in the same file as the loader?

@tech4him1 Please, read the code in the description of this issue. An image to help: http://jmp.sh/sIV2NCK
Would also be nice if you read my comments after the first one. :)

Adding new MiniCssExtractPlugin() in the plugins array solved the issue for me.

some error throw from vue-loader when handling scss rules. Advise from @jason0415 works. Thanks

I'm struggling to follow. Has this issue been closed because in issue #140 the solution was that new MiniCssExtractPlugin() was missing from the plugins section of the webpack config? In @felipero's example repository the plugin is added and I assume it is still not working?! It's still not working for me either and I did not forget to add the plugin. Am I missing something? Thanks.

is this a thing where I cannot use this plugin in a childCompiler????
details here: https://github.com/prateekbh/babel-esm-plugin/issues/4

Yep, tried with a simple child compiler and it fails

const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
const PLUGIN_NAME = 'BabelEsmPlugin';

class BabelEsmPlugin {

  apply(compiler) {
    compiler.hooks.make.tapAsync(PLUGIN_NAME, (compilation, callback) => {
      const childCompiler = compilation.createChildCompiler(PLUGIN_NAME, compiler.options.output);
      childCompiler.context = compiler.context;
      Object.keys(compiler.options.entry).forEach(entry => {
        childCompiler.apply(new SingleEntryPlugin(compiler.context, compiler.options.entry[entry], entry+'.es6'));
      });
      childCompiler.runAsChild((err, entries, childCompilation) => {
        callback(err);
      });
    });
  }

}

module.exports = BabelEsmPlugin;

I'm having the same issue here.
Any other solutions? Were you guys able to fix it?

@EduardoBorsa please read comments above, before write new post, you don't have mini-css-extract-plugin plugin in plugins option

image

As you can see, i log the this[NS].It seems to be runed 2 times, and code catch error secondly.
In this case, i have added MIniCss to plugins array.
And fisrt this.target is 'web', second is 'node'

我的天,直接讲中文了。这问题或许能换个方式解决,主要就是require('css')这一步出问题了,你就算不用它的loader,用style-loader也会报window is not defined(主要是node端打包完css再插到html出问题了,SSR是个硬骨头啊)。所以直接在jsimport

Also make sure your NODE_ENV is _not_ set to "production" when running dev. This was the issue I was having, given the following in my webpack.common.js

    use: [
        process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader'           
     ]
},

I created the special loader for fix this issue: https://github.com/RubtsovAV/only-web-loader

    use: [
        'only-web-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',           
     ]

It will be skip all resources when the target is not 'web'.

P.s. It works very well for me. And I hope this will help you too.

UPD. It will not works with the css modules.

Same issue here with Windows.

After printing NS in the console, I found that NS returns the paths with different cases.
For example:
C:\Users\My_UserName\path\
versus
C:\Users\my_username\path\
during the same running....

I used to open a terminal from SublimeText and my path is C:\Users\My_UserName\path\ when I do it. However if I directly open a terminal from the folder (by typing cmd in the location bar) the path is C:\Users\my_username\path\. In that second case, running npm run build works, but not in the first case.

cc https://github.com/vuejs/vue-cli/issues/1775

I seemed to have gotten past the problem by adding MiniCssExtractPlugin before HtmlWebpackPlugin in the plugins array. I got the NS error when the order was switched.

Yep, confirmed bug can may appear with HtmlWebpackPlugin. Somebody can test this with https://github.com/jantimon/html-webpack-plugin/pull/953?

I just faced a similar issue (this[MODULE_TYPE] is not a function) and found that I added the loader but not the plugin (because I was adding it with a condition). I think this kind of error could be detected by testing the validity of this[MODULE_TYPE].

@MoOx Huge thanks ! I got this error by not adding correct plugins into webpack config.

Is it correct that this error appears in two cases:

  1. You use the mini-css-extract-plugin loader, but not the plugin. (You need to use both.)
  2. The plugin can't be used in a child compiler. (Is this correct?) There was also an example which shows this error.

Was 2. ever fixed or is there a known workaround? I tried to prerender a React page with the html-webpack-plugin and I see this error. (I guess this is because of 2., because I use the loader _and_ plugin and it works without prerendering.)

According to this comment. I've got the same issue. For me the problem was with html-webpack-plugin. I solved that by upgrading it to the latest version npm i -D html-webpack-plugin@next. WARNING the latest version of the plugin (html-webpack-plugin) is still in beta ^4.0.0-beta.5. Update it at your own risk.

This happened to me because I had 2 'plugin' sections in webpack.config, one at the top and one at the bottom...

After consolidating them into one plugin entry, it resolved the error.

I still get this problem when trying to include a css file in a html template.
The plugin is included and works for .css imported in .js files.

"html-webpack-plugin": "4.0.0-beta.8"
"webpack": "4.39.1",
"html-loader": "0.5.5",
"mini-css-extract-plugin": "0.8.0",
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

I found the same bug and the only solution that worked was @RubtsovAV https://github.com/webpack-contrib/mini-css-extract-plugin/issues/73#issuecomment-411330683

I tried with html-webpack-plugin 4.0.0-beta.11 and still didn't work, I still get TypeError: this[MODULE_TYPE] is not a function

As others have said, the bug seems to appear in child-compilers.

Seeing something similar in an app from create-react-app with the latest version of @storybook/react, but only on Node 12...

ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js
ERR! ./node_modules/react-table/react-table.css
ERR! Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! TypeError: this[MODULE_TYPE] is not a function
ERR!     at /home/mmior/apps/relational-playground/node_modules/mini-css-extract-plugin/dist/loader.js:172:24
ERR!     at /home/mmior/apps/relational-playground/node_modules/webpack/lib/Compiler.js:343:11
ERR!     at /home/mmior/apps/relational-playground/node_modules/webpack/lib/Compiler.js:681:15
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mmior/apps/relational-playground/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/home/mmior/apps/relational-playground/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /home/mmior/apps/relational-playground/node_modules/webpack/lib/Compiler.js:678:31
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mmior/apps/relational-playground/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/home/mmior/apps/relational-playground/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /home/mmior/apps/relational-playground/node_modules/webpack/lib/Compilation.js:1423:35
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/mmior/apps/relational-playground/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/home/mmior/apps/relational-playground/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /home/mmior/apps/relational-playground/node_modules/webpack/lib/Compilation.js:1414:32
ERR!     at eval (eval at create (/home/mmior/apps/relational-playground/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at runMicrotasks (<anonymous>)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:94:5)

@michaelmior Node v13.2.0 also has something similar output with CRA + latest @storybook/react setup:

ERR! => Failed to build the preview                                                                             
ERR! ./src/pages/HyperTuningAll.module.scss
ERR! Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! TypeError: this[MODULE_TYPE] is not a function
ERR!     at /Users/sparanoid/Git/openbayes-console/node_modules/mini-css-extract-plugin/dist/loader.js:170:24
ERR!     at /Users/sparanoid/Git/openbayes-console/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:339:11
ERR!     at /Users/sparanoid/Git/openbayes-console/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:664:15
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/sparanoid/Git/openbayes-console/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/sparanoid/Git/openbayes-console/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/sparanoid/Git/openbayes-console/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:661:31
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/sparanoid/Git/openbayes-console/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/sparanoid/Git/openbayes-console/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/sparanoid/Git/openbayes-console/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1395:35
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/sparanoid/Git/openbayes-console/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/Users/sparanoid/Git/openbayes-console/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at /Users/sparanoid/Git/openbayes-console/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1386:32
ERR!     at eval (eval at create (/Users/sparanoid/Git/openbayes-console/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:93:5)
ERR!  @ ./src/pages/HyperTuningAll.tsx 1:572-618 3:724-727 3:1444-1447 3:2093-2096 3:2405-2408 3:3283-3286 3:4075-4078
ERR!  @ ./src/TemplateWithSidebar.tsx
ERR!  @ ./src/components/SideBar/index.tsx
ERR!  @ ./src/components/SideBar/SideBar.stories.js
ERR!  @ ./src sync \.stories\.js$
ERR!  @ ./.storybook/config.js
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js

Same here with the latest @storybook/react. Though I'm using Node v10.15.2.
Didn't work with "html-webpack-plugin": "^4.0.0-beta.11" either.

ERR! => Failed to build the preview
ERR! ./src/index.css
ERR! Module build failed (from ./node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! TypeError: this[MODULE_TYPE] is not a function
ERR!     at childCompiler.runAsChild (/node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js:141:24)
ERR!     at compile (/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  @ ./.storybook/preview.js 8:0-26
ERR!  @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/preview.js ./.storybook/generated-entry.js
ERR! ./node_modules/normalize.css/normalize.css
ERR! Module build failed (from ./node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! TypeError: this[MODULE_TYPE] is not a function
ERR!     at childCompiler.runAsChild (/node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js:141:24)
ERR!     at compile (/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11)
ERR!     at hooks.afterCompile.callAsync.err (/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at compilation.seal.err (/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeAssets.callAsync.err (/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35)
ERR!     at AsyncSeriesHook.eval [as callAsync] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
ERR!     at AsyncSeriesHook.lazyCompileHook (/node_modules/tapable/lib/Hook.js:154:20)
ERR!     at hooks.optimizeChunkAssets.callAsync.err (/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32)
ERR!     at _promise0.then._result0 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)

Please don't spam same issues, we known about the problem

Sorry for delay.

Here two cases:

All related issues to storybook please open in storybook repo, anyway if you still have the problem please open the new issue with reproducible test repo

Was this page helpful?
0 / 5 - 0 ratings