Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
felipero opened this issue Mar 30, 2018 · 49 comments
Closed

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

felipero opened this issue Mar 30, 2018 · 49 comments

Comments

@felipero
Copy link

felipero commented Mar 30, 2018

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
Copy link

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
Copy link
Author

felipero commented Apr 3, 2018

@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
Copy link
Author

felipero commented Apr 4, 2018

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
Copy link

nurbek-ab commented Apr 10, 2018

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
Copy link

@felipero Add it to both prod and dev configs.

@felipero
Copy link
Author

@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
Copy link

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

@felipero
Copy link
Author

@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
Copy link

Same here

@tim-soft
Copy link

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
Copy link
Member

It is bug, feel free to fix it

@alexander-akait
Copy link
Member

alexander-akait commented Apr 11, 2018

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

@alexander-akait
Copy link
Member

Also somebody can create minimum reproducible test repo with HtmlWebpackPlugin?

@gavinlynch
Copy link

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

@TheSharpieOne
Copy link

TheSharpieOne commented Apr 12, 2018

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.

@felipero
Copy link
Author

@evilebottnawi Here it is: https://github.com/felipero/mini-css-extract-plugin-ns-bug

@sbuckpesch
Copy link

sbuckpesch commented Apr 18, 2018

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... :-)

@toBeTheLight
Copy link

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

@felipero
Copy link
Author

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

@ftorre104
Copy link

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.

@tech4him1
Copy link

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

@felipero
Copy link
Author

felipero commented Apr 24, 2018

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

@jason0415
Copy link

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

@raphaelsoul
Copy link

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

@Manc
Copy link

Manc commented May 23, 2018

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.

@prateekbh
Copy link

is this a thing where I cannot use this plugin in a childCompiler????
details here: prateekbh/babel-esm-plugin#4

@MoOx
Copy link

MoOx commented Nov 26, 2018

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 added a commit to MoOx/mini-css-extract-plugin that referenced this issue Nov 26, 2018
@revskill10
Copy link

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

@donaldpipowitch
Copy link

donaldpipowitch commented Mar 2, 2019

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

@Senior-Fin
Copy link

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.

@flabbergasted
Copy link

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.

@tobdub-snce
Copy link

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

@davidblnc
Copy link

I found the same bug and the only solution that worked was @RubtsovAV #73 (comment)

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.

@michaelmior
Copy link

michaelmior commented Jan 15, 2020

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)

@sparanoid
Copy link

@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

@nikitatrifan
Copy link

nikitatrifan commented Feb 11, 2020

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)

@alexander-akait
Copy link
Member

alexander-akait commented Feb 11, 2020

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

@alexander-akait
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests