dszopa dszopa - 1 month ago 6
Javascript Question

React Router - Stylesheet getting marked as "text/html" when adding a variable route (/:userId)

Our custom stylsheet "styles.css" is getting marked with the incorrect MIME type "text/html" even thought it has:

rel="stylesheet" type="text/css"


This error only occurs when going to routes with a variable parameter like /:userId

The exact error is:


The stylesheet http://localhost:3000/user/static/styles/styles.css was
not loaded because its MIME type, “text/html”, is not “text/css”.


Router Code:

ReactDom.render(
<Router history={browserHistory}>
<Route component={MainLayout}>
<Route path="/" component={App} />
<Route path="/main" component={Home} />
<Route path="/user/:userId" component={UserSetting} />
</Route>
</Router>,
document.querySelector('.container')
);


Is it possible that this is simply some configuration that I need to account for on our express server?

Answer

This turned out to be a simple oversight on my part. In my index.html i was missing a slash for my path starting at static.

<link rel="stylesheet" type="text/css" href="static/styles/styles.css">

To

<link rel="stylesheet" type="text/css" href="/static/styles/styles.css">
Comments