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

[michaelwnyc]

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!

[alexander-akait]

@michaelize Can you create minimum reproducible test repo?

[vasivas]

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

[alexander-akait]

@vasivas I clone your repo and run npm run start all works fine. Please provide reproducible test repo and describe steps how reproduce Reproduce, WIP

[alexander-akait]

@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

[vasivas]

@evilebottnawi minimum? it is minimum.. if you get rid of webpack-hot-middleware webpack-hot-server-middleware and ssr, the mini-css-extract-plugin is likely to work.

[alexander-akait]

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

[vasivas]

@evilebottnawi then open my issues in extract-text-webpack-plugin. It supports hmr!

[alexander-akait]

@vasivas webpack@4 doesn't support ETWP you should send PR with support hmr to this plugin

[glook]

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

[davidfurlong]

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

[mercuriete]

@davidfurlong thanks, you saved me lot of time.

[fancyboynet]

@davidfurlong can you paste the config please?I am still a little confused, thanks.

[dtothefp]

If HotModuleReplacementPlugin as option multiStep: true this happens

[ejoo]

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.

[mercuriete]

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.

[ejoo]

{
        test: /\.s(a|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              // publicPath: "../",
              hmr: false
            }
          },
          {
            loader: "vue-style-loader"
          },
          {
            loader: "css-loader"
          },

          { loader: "postcss-loader" }, // "sass-loader"
          {
            loader: "sass-loader",
            options: {
              implementation: require("node-sass"),
              sassOptions: {
                importer: magicImporter()
              }
            }
          }
        ]
      },

@mercuriete I'm getting the same error from the above rule. Do you think what might be causing this issue?

[xuesongde]

I @import a .scss file in a .less file also got the same error. Keep in mind use the same file type.

[mercuriete]

@ejoo im sorry.
I dont know exactly what your problem os but...
Ussually you have to create 2 diferentes rules.
One for including node_modules and another excluding node_modules.
And i preffer to do one rule per extensión.
I dont like s(a|s)es regular expression if you are not knowing what is going on.

I would start doing lot of simple rules and then merge toghether once I understand what is going on.

Sorry for not being helpful for you. :(

Edit: by the way check your chaining orden.
The order is counterintuitive. The first is the last and the last is the first.