I have a Vue.js app with Webpack, and I have configured my CSS loader like this:

module: {
    rules: [
      ...
      {
        test: /\.css$/,
        use: [
          isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
          { loader: "css-loader", options: { sourceMap: isDev } },
        ],
      },
      ...
    ],
  },

When I run yarn build it runs cross-env NODE_ENV=production webpack which will use MiniCSSExtractPlugin.loader, but this throws some errors:

ERROR in ./node_modules/@progress/kendo-theme-default/dist/all.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[MODULE_TYPE] is not a function

The problem comes from importing this style:

import "@progress/kendo-theme-default/dist/all.css";

I should mention that this works fine in development mode, I only have this issue with the MiniCSSExtractPlugin.

However, this import is not the only one that cause this issue, using this syntax throws an error as well:

<style>
.charts > * {
  margin: 50px 0;
}
</style>

The error:

ERROR in ./src/App.vue?vue&type=style&index=0&lang=css& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: this[MODULE_TYPE] is not a function

I'm using:

"webpack": "~4.29", 
"vue-style-loader": "~4.1",
"mini-css-extract-plugin": "~0.5",

How can I solve this issue?