search

webpack / webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
MIT License
7.78k stars 1.43k forks source link

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

Closed Darkzarich closed 3 years ago

Darkzarich commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

alexander-akait commented 3 years ago

Duplicate https://github.com/webpack-contrib/mini-css-extract-plugin/issues/444, nothing to fix here, I will fix it after webpack-dev-server stable release

Darkzarich commented 3 years ago

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