Beta 6 vs mini-css-extract-plugin

[pavelloz]

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",

[Simek]

I also have same issue with fresh released v8.0.0. As mentioned above v8.0.0-beta4 works as intended.

Note: only one change has been made between v8.0.0-beta4 and v8.0.0-beta6 releases and it's PR #660.

Webpack Version: 4.17.1
Babel Core Version: 7.0.0
Babel Loader Version: 8.0.0

Please tell us about your environment:
OSX 10.13.6, Win 10

[juank11memphis]

I am having the same issue here :(
Does anyone has a fix for this?

[Simek]

@juank11memphis ATM you can only downgrade babel-loader to v8.0.0-beta4 to fix this issue.

[loganfsmyth]

Hey all, it'd be a big help if someone could make a small repository that reproduces the issue. I know nothing about postcss or the extract-css plugin, so the steps above are not enough to reproduce for me.

[Simek]

@loganfsmyth I'm on it.

[Simek]

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

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

[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 #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 #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: webpack-contrib/mini-css-extract-plugin#102 (comment) As mentioned there,

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

fixes the issue.