Beta 6 vs mini-css-extract-plugin

I’m submitting a bug report

Webpack Version: 4.17.1 Babel Core Version: 7.0.0-rc.2

Babel Loader Version: 8.0.0-beta.6

Please tell us about your environment: OSX 10.12

Current behavior: In beta 4 when i use mini-css-extract-plugin to emit css files it works fine. Then after i upgrade to beta 6, no css files are emitted.

No css files, just JS emitted.

Expected/desired behavior:

Version: webpack 4.17.1
Time: 8820ms
Built at: 2018-08-24 16:58:48
                    Asset       Size  Chunks             Chunk Names
               vendor.css    206 KiB       1  [emitted]  vendor
                  app.css   23.2 KiB       0  [emitted]  app
                   app.js   14.2 KiB       0  [emitted]  app
                vendor.js   1.25 KiB       1  [emitted]  vendor

Minimal setup to reproduce:

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BUILD_DIR = path.join(__dirname, process.env.npm_package_config_build_dir);

const isProduction = process.env.NODE_ENV === 'production';

module.exports = env => {
  const plugins = [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].css'
    })];

  return {
    entry: {
      app: './src/app'
    },
    output: {
      filename: '[name].js',
      chunkFilename: '[name].[chunkhash:3].js',
      path: BUILD_DIR
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader?retainLines=true&cacheDirectory'
        },
        {
          test: /(\.css|\.scss)$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader?url=false',
            'postcss-loader',
            'sass-loader'
          ]
        }
      ]
    },
    plugins: plugins,
    mode: isProduction ? 'production' : 'development'
  };
};

In app.js:

import './app.scss'

Naturally app.scss has to be next to app.js.

Notable deps used above:

    "@babel/cli": "^7.0.0-rc.2",
    "@babel/core": "^7.0.0-rc.2",
    "@babel/preset-env": "^7.0.0-rc.2",
    "@babel/register": "^7.0.0-rc.2",
    "babel-loader": "^8.0.0-beta.6",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "4.9.3",
    "webpack": "4.17.1",
    "postcss": "^7.0.2",

[loganfsmyth]

@Simek Perfect, thanks for doing that.

This appears to be a side-effect of another change we made, but is essentially uncovering an existing issue. With https://github.com/babel/babel-loader/pull/660, Babel will now skip transforming import statements in favor of letting Webpack do it.

This is great on the whole, but it means that if you weren’t conforming to Webpack’s expectations correctly, you can run into issues. In this instance, before https://github.com/babel/babel-loader/pull/660, Babel would just compile import to require 100% of the time. Since sideEffects: false does nothing for CommonJS files, this essentially means that sideEffects: false was entirely ignored.

Now that Babel skips compilation, you’re running into this: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/102#issuecomment-384947142 As mentioned there,

"sideEffects": [ "*.css" ],

fixes the issue.

[Simek]

Minimal reproduction repo: https://github.com/Simek/babel-loader-bug-661

Removing "sideEffects": false from package.json fixes missing CSS file in output.