+ Start a Discussion
Inbox OutboxInbox Outbox 

Code help please in LWC

 renderedCallback method must show this message: "loaded successfully" if the promise is successful. 
I am getting an error instead. fontawesome css folder also is not being recognized. 
Please check the below error messages in the chrome console and also my code.

These are the errors in the console (chrome):
Memory_Game_LWC:1 Refused to apply style from 'https://customer-platform-9835deved.lightning.force.com/resource/1621777808000/fontawesomefontawesome/css/font-awesome.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

memoryGameLwc.js:4 undefined
eval @ memoryGameLwc.js:4

Memory_Game_LWC:1 Refused to apply style from 'https://customer-platform-9835-dev-ed.lightning.force.com/resource/1621777808000/fontawesomefontawesome/css/font-awesome.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.


This is JS file:
import { LightningElement } from 'lwc';
import {loadStyle} from 'lightning/platformResourceLoader'
import fontawesome from '@salesforce/resourceUrl/fontawesome'
export default class MemoryGameLwc extends LightningElement {
    
    isLibLoaded= false;
    renderedCallback(){
        if(this.isLibLoaded){
            return
        }
        else{
            loadStyle(this, fontawesome+'fontawesome/css/font-awesome.min.css').then(()=>{
                console.log("loaded successfully")
            }).catch(error=>{
                console.error(error)
            })
        }
      this.isLibLoaded= true;
    }
}

HTML:
<template>
  <div class= "container">
    <lightning-card title= "Memory Game LWC">
        <div class= "slds-m-around_medium">   
            <section class= "score-panel">
                Score area
            </section> 
            <section class= "game-panel">
                Game area
            </section> 
        </div>
    </lightning-card>
  </div>  
</template>

CSS:
.container{   
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

 
Best Answer chosen by Inbox Outbox
Yogendra JangidYogendra Jangid
ok..trust you have uploaded the correct fontawsome zip file. Just for checking, download the zip from static resource and unzip it and look for the path as
.../fontawesome/css/font-awesome.min.css from the root directory. Also check if you have any font-awesome.min in CSS folder. I doubt it to be as fontawesome.min

Also I would suggest to update your code as below in case if it is fontawesome and put "/" before concatenating. 
loadStyle(this, fontawesome+'/fontawesome/css/fontawesome.min.css').then(()=>{

if still doesn't work, can you try reuploading the static resource with zip and it should read like application/zip.
Hope this will resolve your issue. If so please can you mark this as the best answer. Thanks,

All Answers

Yogendra JangidYogendra Jangid
Hi, 
check for your the static resource fontawesome MIME type by going in Setup -> Static Resource.
It should be text/css. If not them there is something wrong in your Static Resource file.
If this resolves your error, please mark this as the best answer. Thanks
Inbox OutboxInbox Outbox
It is a zip file, mime type says "application/x-zip-compressed". I am trying to access fontawesome zip file. Is there a way to do that?
Yogendra JangidYogendra Jangid
ok..trust you have uploaded the correct fontawsome zip file. Just for checking, download the zip from static resource and unzip it and look for the path as
.../fontawesome/css/font-awesome.min.css from the root directory. Also check if you have any font-awesome.min in CSS folder. I doubt it to be as fontawesome.min

Also I would suggest to update your code as below in case if it is fontawesome and put "/" before concatenating. 
loadStyle(this, fontawesome+'/fontawesome/css/fontawesome.min.css').then(()=>{

if still doesn't work, can you try reuploading the static resource with zip and it should read like application/zip.
Hope this will resolve your issue. If so please can you mark this as the best answer. Thanks,
This was selected as the best answer
Inbox OutboxInbox Outbox
before concatenating not adding is the reason for error. Thank you Yogendra