Menu
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 !!
970
To Solve MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled ErrorJust make Sure Your File name and the name You are Using in Link Tag Both Are Same. For Example my File name is style. css Then My Link tag is Something like this:<link rel=”stylesheet” href=”style.
A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.
A MIME type (or media type) is an identifier for file formats or format contents on the Internet. MIME stands for Multipurpose Internet Mail Extensions and all MIME types are officially maintained by the Internet Assigned Numbers Authority (IANA).
Look for a <meta> element in the page source that gives the MIME type, for example <meta http-equiv="Content-Type" content="text/html"> . According to the standards, the <meta> element that specifies the MIME type should be ignored if there's a Content-Type header available.
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.
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' }
])
]
};
<!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>
You could try adding the type property:
<link type="css" rel="stylesheet" href="src/node_modules/bootstrap/dist/css/bootstrap.css" crossorigin="anonymous">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
