dszopa dszopa - 1 year ago 85
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:

<Router history={browserHistory}>
<Route component={MainLayout}>
<Route path="/" component={App} />
<Route path="/main" component={Home} />
<Route path="/user/:userId" component={UserSetting} />

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

Answer Source

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">


<link rel="stylesheet" type="text/css" href="/static/styles/styles.css">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download