mini-css-extract-plugin: Error: Didn't get a result from child compiler

node: 8.9.4
OS: OSX
mini-css-extract-plugin: 0.4.0

I’m having the following error. I’m using vue-loader and @rails/webpacker

ERROR in ./node_modules/quill/dist/quill.snow.css (./node_modules/css-loader??ref–6-1!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader??ref–13-1!./node_modules/postcss-loader/lib??ref–13-2!./node_modules/quill/dist/quill.snow.css) Module build failed: Error: Didn’t get a result from child compiler

css-loader config:

module.exports = {
  test: /\.css$/,
  use: [
    // 'vue-style-loader',
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        minimize: !devMode,
        includePaths: [
          join(baseDir, 'node_modules')
        ],
        importLoaders: 1,
        modules: true,
        sourceMap: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          require('postcss-import'),
          require('postcss-cssnext')({
            features: {
              customProperties: {
                warnings: false
              }
            }
          }),
          require('autoprefixer')(),
          require('cssnano')()
        ],
        sourceMap: true
      }
    },
    'resolve-url-loader'
  ]
}

optimization config:

{
    minimizer: [
      // new UglifyJsPlugin({
      //   cache: true,
      //   parallel: true,
      //   sourceMap: false,
      //   uglifyOptions: {
      //     mangle: false,
      //     compress: false // { unused: false, drop_console: env.NODE_ENV === 'production' }
      //   }
      // }),
      new OptimizeCSSAssetsPlugin({})
    ],
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        },
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }

I am importing css files inside vue component:

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

vue-loader config:

module.exports = {
  test: /\.vue(\.erb)?$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      js: 'babel-loader',
      file: 'file-loader',
      css: 'vue-style-loader!css-loader!sass-loader',
      scss: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=false',
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=true'
    }
  }
}

Appreciate if someone can show me any hints where I did wrong.

Thanks!

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 18 (5 by maintainers)

Most upvoted comments

Im getting this on production builds which dont use HMR. Turned out to be a result of having two loaders which matched the file

+112

davidfurlong on Jan 18, 2019

Diplicate https://github.com/webpack-contrib/mini-css-extract-plugin/issues/34. mini-css-extract-plugin doesn’t support hrm right now, feel free to send PR to fix it

+30

alexander-akait on May 7, 2018

Im getting this on production builds which dont use HMR. Turned out to be a result of having two loaders which matched the file

I didn’t get what he meant.

@ejoo If you have two loaders that match the same regular expresion, this fail happen.

for example:


  rules: [
    {
      test: /badregularexpresion$/,
      use: {
        loader: 'first-loader',
      }
    },
      test: /badregularexpresion$/,
      use: {
        loader: 'second-loader',
      }
    },
  ]

EDIT: You have to check properly the exclude paths sometimes you include twice the node_modules by mistake.

EDIT2: it is advisable to use oneof https://webpack.js.org/configuration/module/#ruleoneof oneof is useful to dont make mistakes of double match.

   module: {

        rules: [
            {
                oneOf: [
                    {
                        test: /someRegexp/,
                        use: {
                            loader: "someLoader",
                        }
                    },
                    {
                        test: /someOtherRegexp/,
                        use: {
                            loader: "someOtherLoader",
                        }
                    },

This snipped above is pseudocode I cant paste my example. I hope you understand what a double match is.

+18

mercuriete on Oct 16, 2019

@vasivas also please provide in future minimum reproducible test repo, because i don’t have many time look on your big configurations and other unnecessary stuff

alexander-akait on May 7, 2018

retuned back to extract-text-webpack-plugin@next. Now it works fine!

glook on Jun 19, 2018

If HotModuleReplacementPlugin as option multiStep: true this happens

dtothefp on Jul 26, 2019

@evilebottnawi https://github.com/vasivas/mini-css-extract-plugin-bug-demo

vasivas on May 7, 2018

@davidfurlong thanks, you saved me lot of time.

mercuriete on Mar 14, 2019