mini-css-extract-plugin: Module build failed: TypeError: this[NS] is not a function
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?
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 102
- Comments: 49 (7 by maintainers)
Bug happens when you add loader, but don’t add plugin
I use Webpack 4.5 and I got this error as well. I fixed it by adding
to my plugin section. I know that this was not the problem above… Just in case someone does the same mistake I did… 😃
Adding
new MiniCssExtractPlugin() in the plugins arraysolved the issue for me.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.
@EduardoBorsa please read comments above, before write new post, you don’t have
mini-css-extract-pluginplugin in plugins optionI 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.
Is it correct that this error appears in two cases:
mini-css-extract-pluginloader, but not the plugin. (You need to use both.)Was 2. ever fixed or is there a known workaround? I tried to prerender a React page with the
html-webpack-pluginand I see this error. (I guess this is because of 2., because I use the loader and plugin and it works without prerendering.)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 ofthis[MODULE_TYPE].It is bug, feel free to fix it
Please don’t spam same issues, we known about the problem
Seeing something similar in an app from
create-react-appwith the latest version of@storybook/react, but only on Node 12…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.@michaelmior Node v13.2.0 also has something similar output with CRA + latest
@storybook/reactsetup:@felipero Yes, this happens when I only add loader. After added it to plugins too, it works.
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
thiswon’t have the key.I had seen it mentioned on this thread. Still, I was stung by accidentally using the
MiniCssExtractPlugin.loaderwithout 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 thepluginsarray. Since the object was mutated, the server would build with theMiniCssExtractPlugin.loaderin the loader. My server config did not specify thenew MiniCssExtractPlugin()in thepluginsarray. Fixing that mutation resolved the issue for me.Same issue here with Windows.
After printing
NSin the console, I found thatNSreturns the paths with different cases. For example:C:\Users\My_UserName\path\versusC:\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 typingcmdin the location bar) the path isC:\Users\my_username\path\. In that second case, runningnpm run buildworks, but not in the first case.cc https://github.com/vuejs/vue-cli/issues/1775
Yep, confirmed bug can may appear with HtmlWebpackPlugin. Somebody can test this with https://github.com/jantimon/html-webpack-plugin/pull/953?
Also make sure your
NODE_ENVis not set to “production” when running dev. This was the issue I was having, given the following in my webpack.common.jsYep, tried with a simple child compiler and it fails
is this a thing where I cannot use this plugin in a childCompiler??? details here: https://github.com/prateekbh/babel-esm-plugin/issues/4
@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. 😃
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
NSwas set to the plugin’s path, but the loader’s path is on thethiscontext. Since those paths are different, it cannot find the plugin’s path withinthisand thus it isundefined.@MoOx Huge thanks ! I got this error by not adding correct plugins into webpack config.
I created the special loader for fix this issue: https://github.com/RubtsovAV/only-web-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.
@evilebottnawi Here it is: https://github.com/felipero/mini-css-extract-plugin-ns-bug
I had this issue when using less-loader down the chain, adding the
javascriptEnabled: truefixed it for me, not sure if related