MIME type ('text/html') is not a supported stylesheet MIME type

Question

I have tried almost every solution for the problem which includes. giving type for use of app.use(expre

Answer 1

The problem in my case was the wrong path.

After running npm run build

React created static files, but in index.html was something like href="/static/css/main.39c237f9.chunk.css" so I added a dot at the beginning of the path, becoming href="./static/css/main.39c237f9.chunk.css.

Answer 2

You could try adding the type property:

<link type="css" rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">

Answer 3

I believe that the issue is due to the HtmlWebpackPlugin not providing the mimetype for the css file that has been injected with the MiniCssExtractPlugin. I've managed to solve the problem by using the HtmlWebpackLinkTypePlugin which should insert the mimetype into the css file.

/// top of file
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;

....

const plugins = [
  new CleanWebpackPlugin({
    root: __dirname,
    verbose: true,
    dry: false
  }),
  new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
  new MiniCssExtractPlugin({ filename: "style.css", allChunks: false }),
  new CopyWebpackPlugin([
    { from: './src/index.html', to: 'index.html' },
  ]),
  new webpack.ProvidePlugin({
    Promise: 'es6-promise-promise',
    'React': 'react'
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new LinkTypePlugin({
    '*.css' : 'text/css'
  })
];

This should make your injected stylesheet line look like this:

<link rel="stylesheet" href="./style.css" type="text/css" />

Just a note that the *.css rule is a glob, so if your css file is hosted in a directory under your root, you will need to add something like **/*.css as your rule.

I hope this answers your question.

Answer 4

I'm adding a second answer because I think there could be a different issue. I think the MIME Type error could be due to the css path not being correct. I think it is trying to serve up an error instead of the css file which is not matching the MIME type. Try removing the following line from your HTML Template and allowing the HtmlWebPackPlugin to inject it automatically.

<link rel="stylesheet" href="./style.css" />

Below is my own webpack.config and index.html template which I hope will help.

webpack.config

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LinkTypePlugin = require('html-webpack-link-type-plugin').HtmlWebpackLinkTypePlugin;
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'app/main.js'
    },
    devServer: {
        contentBase: './',
        watchContentBase: true
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {

                        }
                    },
                    "css-loader",
                    "resolve-url-loader",
                    {
                        loader: "sass-loader?sourceMap",
                        options: {
                            includePaths: [
                            ],
                            sourceMap: true
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: /node_modules/
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    publicPath: "./",
                    outputPath: "app"
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './app/style.css',
        }),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new LinkTypePlugin({
            '**/*.css' : 'text/css'
        }),
        new CopyPlugin([
            { from: 'assets', to: 'assets' }
        ])
    ]
};

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="home_container">
</body>

</html>