I want to use the fullcalendar library, using gulp and yarn this is the generated link tag:
But I'm getting this error in the console :
Refused to apply style from 'http://localhost/bower_components/fullcalendar/dist/fullcalendar.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Why I'm getting this and how can I solve it?
In my case, I found out that I had a typo in css file name. Thus I was trying to import an non existing file.
You're app is serving fullcalendar.css with the wrong MIME type ('application/json') some how. So, my advise is to dig the problem trusting in the error message.
In my case, I was trying Thymeleaf and WebJars with spring-boot for the first time and following blindly some tutorial I added this:
@Configuration
public class WebConfigurer extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/");
}
}
Also, my styles were defined in html as below:
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" />
This way, "bootstrap.min.css" and others were given the very same error: "Refused to apply style because its MIME type ('application/json') is not a supported".
I still haven't broken down the reasons for this behavior, but as soon as I realized that spring-boot has an automatic configuration for WebJars, I removed that registration and everything started to work well.
Note: There are some similar tracks with "MIME type ('text/html')" and the reason is usually security filters not allowing the css files and redirecting to html login page. So, keep this in mind and check whether you have some kind of filter/redirect for this request.
Directly put the URL in the browser and see if you can reach it.
For your case, give this url in the browser http://localhost/bower_components/fullcalendar/dist/fullcalendar.css
If you can't reach it, then you have wrong url in your code.
For my case, I had the css file in a directory named css, but in the code I wrote /plugins/css and was getting the same error.
Also, don't forget to give the type="text/css"
So, my code example below:
<head>
<link rel="stylesheet" type="text/css" th:href="@{/css/app.css}">
</head>
If you are using Spring Boot you will not even have to override addResourceHandlers(), just make sure to use th:href and point it to the correct directory.
In my case in the css file where was a reference to a map file
/*# sourceMappingURL=bootstrap-datepicker.css.map */
that was not present. I removed the reference to the source map and worked.
You can trying using the relative path to your static content.
<head>
<link rel="stylesheet" type="text/css" href="../css/app.css">
</head>
