CODEWITHSUNDEEP
javascriptcssreactjswebpackmime-types
Raman Mishra
Raman Mishra

Reputation: 2686

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

I have tried almost every solution for the problem which includes. giving type for <link rel="stylesheet" href="./style.css" /> use of app.use(express.static('public')) and many more but it seems I am not able to find a solution for this.

index.js :

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux'
import "./assets/styles/app.less";
import 'bootstrap/dist/js/bootstrap.js';
import App from './components/base/App';
import store from './store'

const provider =
  <Provider store={store}>
    <App />
  </Provider>

render(provider, document.getElementById('my-app'))

index.html :

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <meta charset=utf-8>
  <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>XYZ</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="./style.css" />
</head>

<body>
  <div id="my-app"></div>
  <script type='text/javascript' src="./bundle.js"></script>
</body>

</html>

webPack.config.js :

'use strict';
const webpack = require('webpack');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')

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'
  })
];

module.exports = {
  entry: ['@babel/polyfill', "./src/index.js"],
  output: {
    path: __dirname + '/dist',
    filename: "bundle.js",
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      //load styles
      {
        test: /\.(sass|less|css)$/,
        use: [
          { loader: 'style-loader' },
          { loader: MiniCssExtractPlugin.loader },
          { loader: "css-loader", options: {} },
          {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: [
                require('autoprefixer')({
                  'browsers': ['> 1%', 'last 2 versions']
                }),
              ]
            }
          },
          { loader: "less-loader", options: {} }
        ]
      },

      // Load images
      {
        test: /\.jpg/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "image/jpg"
          }
        }]
      },
      {
        test: /\.gif/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "image/gif"
          }
        }]
      },
      {
        test: /\.png/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "image/png"
          }
        }]
      },

      // Load fonts
      {
        test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "application/font-woff"
          }
        }]
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [{
          loader: "file-loader"
        }]
      },
      {
        test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            mimetype: "application/font-woff"
          }
        }]
      }
    ]
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.jsx', '.less', '.css'],
    modules: ["src", "node_modules"]
  },
  devServer: {
    compress: true,
    disableHostCheck: true,   // That solved it
  }
}

package.json script tag :

"scripts": {
    "start": "webpack-dev-server --content-base dist/ --port 9000 --config webpack.config.js --watch --progress --inline --hot --history-api-fallback --mode development",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },

npm strat is working fine the application is working fine, but when i do npm run build it gives me the error:

**Refused to apply style from 'http://localhost:9000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.**

**Refused to execute script from 'http://localhost:9000/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.**

In the network part I got the following:

Ok response for : http://localhost:9000/bundle.js

cancled for : http://localhost:9000/style.css

Help !!

Upvotes: 25

Views: 154007

Answers (7)

rmj
rmj

Reputation: 21

Vue.js with typescript application.

A couple of mistakes that have generated your error for me in the past:

  1. Forgetting to modify the 'publicPath' in vue.config.js when deploying to a new environment.

Generated file paths to all css and js files still pointed to a path in the previous environment.

client-app/vue.config.js

module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "https://<yourUrlHere>" : "/",
chainWebpack: config => {
  1. Left commented lines in a .ts file, and received the error against 'app.<>.js’.

This file holds content from the client-app/src/router/index.ts file, where I had left many commented lines.

Upvotes: 0

Tomas Maksimavicius
Tomas Maksimavicius

Reputation: 414

I had the same problem. The solution was just to wait some time, because some hosting service providers have a delay after your update.

Upvotes: 1

vikramvi
vikramvi

Reputation: 3605

It seems to bug either in VSCode or live server extension

Changed existing style.css name to abc.css, the error is gone.

Not sure what's the problem.

I remember there was a folder by name style.css created accidentally earlier which I've deleted

Upvotes: 0

Alex Barbu
Alex Barbu

Reputation: 107

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.

Upvotes: 1

ColemanTO
ColemanTO

Reputation: 849

You could try adding the type property:

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

Upvotes: 21

Stuart Nichols
Stuart Nichols

Reputation: 1151

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>

Upvotes: 32

Stuart Nichols
Stuart Nichols

Reputation: 1151

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.

Upvotes: 3

Related Questions