CODEWITHSUNDEEP
javascriptcssreactjs
Humza Khan
Humza Khan

Reputation: 733

ReactJS discarding all included css files

I have a ReactJS application which works fine but except for one route, where the entire loaded css goes gray in the source code like this and is not applied to any element on the page:

enter image description here

My component is fairly simple and does one thing:

import React, { useEffect }  from 'react';
import { OAuthHandlerService } from '<removed>';
import {LoadingAnimation} from "components/common";

interface IOAuthPageProps {
    urlQuery: any;
}


const OAuthPage = (props: IOAuthPageProps) => {
    useEffect(() => {
        //OAuthHandlerService.onAuthTokenReceived(props.urlQuery);
    }, []);

    return (
        <LoadingAnimation show={true} showSpinner={true} message='Redirecting...' />
    );
}

export default OAuthPage;

I'm unable to see why all the loaded css is discarded, any ideas?

Upvotes: 0

Views: 26

Answers (1)

Humza Khan
Humza Khan

Reputation: 733

Fixed it. The issue was the route, it was going to non-existent route to load the css files:

enter image description here

this was fixed by specify the base URL:

<base href="/" />

The second issue was the mime type not specified, it works fine in other pages but I still specified type="text/css" and it is gone now.

Upvotes: 1

Related Questions