Mini-css-extract-plugin: extracted CSS file is being referenced in <script> tag instead of the expected JS bundle file

Created on 21 Mar 2018 · 3Comments · Source: webpack-contrib/mini-css-extract-plugin

Overview

Not sure if this might be a compatibility issue with HtmlWebpackPlugin or not, but after migrating from ExtractTextWebpackPlugin as part of webpack v4 upgrade, I am seeing the the main CSS file being referenced where a JS file should be referenced in the built _index.html_.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Providence Geeks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link href="index.css" rel="stylesheet"></head>

  <body>
    <div id="root">Loading ...</div>
    <script type="text/javascript" src="0.chunk.js">
    </script><script type="text/javascript" src="index.css"></script></body>
</html>

notice a index.css path within the second <script> tag

This causes an Syntax error of "unknown token" in the browser, because it doesn't understand the CSS it is getting (in this case an @import statement)
screen shot 2018-03-21 at 4 21 29 pm

Technical Summary

Environment

OS: OSX 10.13.3
Node: v8.9.4
webpack: ^4.1.0

Config

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',

  entry: {
    index: './index.jsx'
  },

  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].[chunkhash].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },

  context: path.resolve(__dirname, 'src'),

  resolve: {
    extensions: ['.jsx', '.js']
  },

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /node_modules/,
          enforce: true
        }
      }
    }
  },

  module: {
    rules: [{
      test: /\.(js*)x$/,
      enforce: 'pre',
      loader: 'eslint-loader',
      exclude: path.join(__dirname, 'node_modules')
    }, {
      test: /\.(js*)x$/,
      loaders: [
        'babel-loader',
        'react-hot-loader/webpack'
      ],
      exclude: path.join(__dirname, 'node_modules')
    }, {
      test: /\.(s*)css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader', 
        'sass-loader'
      ]
    }, {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
    }, {
      test: /\.(ttf|eot|svg|jpe?g|png|gif|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'file-loader'
    }]
  },

  plugins: [
    new MiniCssExtractPlugin(),

    new HtmlWebpackPlugin({
      template: './index.html',
      chunksSortMode: 'dependency'
    }),

    new webpack.ProvidePlugin({
      jQuery: 'jquery'
    })
  ]
};

Sample Repo

The issue can be reproduced with the self contained webpack config by running the following steps

git clone this repo
git checkout test-mini-css-extract-plugin
run yarn install
run yarn mini-extract

Actual: _build/index.html_ has a CSS file + path inside a <script> tag
Expected: _build/index.html_ should only reference JS files in <script> tags

Source

thescientist13

👍4

Most helpful comment

@thescientist13 solution worked great for me!

Something to note for anybody who is using React CSS Modules... Make sure you remove the style-loader from your chained loaders when using this plugin. It was really throwing me off.

Here is my css/scss loader config just for some reference.

{
  test: /\.(css|scss)$/,
  use: [
    'css-hot-loader',
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMap: true,
        importLoaders: 3,
        localIdentName: '[local]___[hash:base64:5]'
      }
    },
    {
      loader: 'resolve-url-loader',
      options: {
        sourceMap: true,
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true,
        plugins: [
          AutoPrefixer({ browsers: ['last 2 versions'] })
        ]
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        outputStyle: 'expanded',
      }
    },
  ]
}

drewdecarme on 2 Apr 2018

👍4 🎉1

All 3 comments

i've upgraded my test branch to the latest version of html-webpack-plugin (3.1.0 at the time of this writing) and the problem seems to be resolved. Will test in my main upgrade branch and will report back.

thescientist13 on 23 Mar 2018

🎉1 👍1

Seems to be working my end now after upgrading to latest html-webpack-plugin. Seems since the version I had (3.0.3) the commits happend, which seem relevant to the issue here