"Refused to apply style from ... because its MIME type" error

[Darkzarich]

• Operating System: Windows 10
• Node Version: v14.16.1
• NPM Version: 6.14.12
• webpack Version: 5.30.0
• webpack-dev-server Version: v4.0.0-beta.2
• Browser: Chrome Version 89.0.4389.114 (Official Build) (64-bit)

• This is a bug

Code

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core'),
    },
  },
  devtool: isDev ? 'source-map' : false,
  devServer: {
    port: 8080,
    hot: isDev,
  },
  plugins: [
    new ESLintPlugin(),
    new HTMLWebpackPlugin({
      template: 'index.html',
      filename: 'index.html',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd,
      },
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/favicon.ico'),
          to: path.resolve(__dirname, 'dist'),
        },
      ],
    }),
    new MiniCssExtractPlugin({
      filename: 'bundle.[contenthash].css',
    }),
  ],
  target: 'web',
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
}

package.json, dependencies

{
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/eslint-parser": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^8.1.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.0",
    "eslint": "^7.23.0",
    "eslint-config-google": "^0.14.0",
    "eslint-webpack-plugin": "^2.5.3",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.4.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "v4.0.0-beta.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "normalize.css": "^8.0.1"
  }
}

Expected Behavior

webpack-devserver updates the page on changes

Actual Behavior

webpack-dev-server sometimes (usually after some amount of similar changes back and forth or a error in terminal) doesn't update bundle.css on changes in a *.scss file. There is an error in devtools terminal:

Refused to apply style from 'http://localhost:8080/bundle.827759789137d0c65a1e.css?1617926518186' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Updating the page with F5 helps to load an actual version.

Apparently, a new style file was compiled on a change but html was not updated and webpack-dev-server tried to access not existing anymore style file.

UPD

It also stops detecting changes in any other files... Or, to be more accurate, it does say in the devtools that an update is detected but nothing happens, the content of the page is not updated

[Darkzarich]

Technically, a workaround would be removing hashes from bundle names in development (and it will also increase building speed) but I would really like to know what is going wrong here

[alexander-akait]

HMR and [contenthash] in mini-css-extract-plugin is not supported

[alexander-akait]

Duplicate webpack-contrib/mini-css-extract-plugin#444, nothing to fix here, I will fix it after webpack-dev-server stable release

[Darkzarich]

If anyone is facing the same issue using [contenthash] or any other hash in bundle name just remove this for development and leave for production like so

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const filename = (ext) =>
  isDev ? `bundle.${ext}` : `bundle.[fullhash].${ext}`

...

  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  }