close

[Solved] MIME type (‘text/html’) is not a supported stylesheet MIME type

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error MIME type (‘text/html’) is not a supported stylesheet MIME type in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve MIME type (‘text/html’) is not a supported stylesheet MIME type Error ?

  1. How To Solve MIME type ('text/html') is not a supported stylesheet MIME type Error?

    To Solve MIME type ('text/html') is not a supported stylesheet MIME type Error the issue is due to the HtmlWebpackPlugin not providing the mime-type 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 mime-type into the CSS file.

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

    To Solve MIME type ('text/html') is not a supported stylesheet MIME type Error the issue is due to the HtmlWebpackPlugin not providing the mime-type 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 mime-type into the CSS file.

Solution 1

You could try adding the type property:

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

Solution 2

the issue is due to the HtmlWebpackPlugin not providing the mime-type 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 mime-type 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.

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment