Importing CSS files causes TypeError: this[MODULE_TYPE] is not a function

[Muntasir Syed]

App.css

body {
    background-color: #fcfcfc;
    display: block;
    font-family: Helvetica Neue, Arial, sans-serif;
    font-feature-settings: "kern", "liga", "clig", "calt";
    font-kerning: normal;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.7px;
    margin: 0;
    position: relative;
    text-rendering: optimizelegibility;
    word-wrap: break-word;
}

App.tsx

import React from "react"

import NavigationBar from "../shared/components/navigation_bar"

import "./App.css" // importing it here

interface IAppProps {
    children: React.ReactNode | React.ReactNode[],
}

const App = ({ children }: IAppProps) => (
    <>
        <NavigationBar />
        {children}
    </>
)

export default App

Results in:

[2019-06-27T16:51:24.881Z] ./src/shared/App.css
[2019-06-27T16:51:24.881Z] Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
[2019-06-27T16:51:24.881Z] TypeError: this[MODULE_TYPE] is not a function
[2019-06-27T16:51:24.885Z] Failed to compile server
webpack:///./src/shared/App.css?:1
throw new Error("Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nTypeError: this[MODULE_TYPE] is not a function\n    at childCompiler.runAsChild

[Manuel Bieh]

Thanks for filing this issue. Was able to reproduce it by simply creating and importing an empty test.js. Weird bug, will investigate!

[ppvolto]

I have a simmilar Problem wenn integrating scss into the System and i needed to Remove the MiniCssExtractPlugin.loader from the cssLoaderServer

[Manuel Bieh]

@ppvolto ... or add the mini-css-extract-plugin to the server config! See: webpack-contrib/mini-css-extract-plugin#73 (comment)

It's solved now!

[Muntasir Syed]

Thanks - the bug has disappeared at build, however my CSS file still doesn't actually end up getting imported.

[Michael Cesare]

Most of the time this error is an indication that you have something wrong in your loaders. check order of plugins, check usage, check configs, clear package.lock/node_modules, and dont forget to check versions.

I spent 3 hours investigating and didnt notice that added duplicate mini-css twice for the client.

Some packages of my setup:
React, Redux, postCSS, TypeScript, loadable components, Sass, NodeJS, ExpressJS, react-router.

https://github.com/michael-cesare/CMSFrontEnd