Resource interpreted as Stylesheet but transferred with MIME type text/html:

Post Reply
dave.ekhaus
Posts: 4
Joined: 12 Oct 2018, 06:08

09 Nov 2018, 17:15

Hi

I've successfully configured a Django app to serve a ReactJS app as its (the Django app's) static content. The ReactJS app was created used the create-react-app script. The method is straight-forward and is explained here ( https://medium.com/alpha-coder/heres-a- ... b0036663c6 ).

I can access the React app by accessing the url of the Django app (http://localhost:8000) - which is the whole point of having Django serve the React app as its static content. This is also works in production.

I've replaced the React app that I added to my Django app (aka the one created using create-react-app) - with the PrimeReact Avalon app (also created using create-react-app). While the React app works when run using 'npm start' - there are rendering issues when I run 'npm run build' and then try and access the app using the Django URL (by the way - this is the same process used for the basic React app created using create-react-app).

The specific error is the PrimeReact site's css isn't loading and the following error appears in the Javascript console ...

"Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8000/assets/layout/css/layout-blue.css"

This file (layout-blue.css) is loading - I can see it being requested in the Django app's log and its not generating a 404 in the browser. The issue is just that the css files are not being interpreted as css.

How do I fix ?

Thanks
Dave

dave.ekhaus
Posts: 4
Joined: 12 Oct 2018, 06:08

09 Nov 2018, 21:23

Hi

I fixed the

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8000/assets/layout/css/layout-blue.css"

issue - meaning the browser is no longer generating that error when loading the page.

However - the page still is not rendering. All the pages resources (HTML, JS, CSS) are loading (aka non 404's) - but the browser is not interpreting any CSS

I've verified that the browser is loading the css and js files from the directory that Django is configured to serve static assets from by manually performing some harmless edit within both the css and js files. I then reload the page and confirm that I can see the manual edits that I made.

I'd like to reiterate that when I run the client app directly (using 'npm start') - the React app renders. I realize that this means that the issue most likely is Django specific - but would nonetheless really appreciate any insight anyone might have on resolving this issue.

Here's a link to a screen-shot showing the un-rendered page as well as the console showing that the *.css, *.js loaded correctly ...

Image

Thanks
Dave

dave.ekhaus
Posts: 4
Joined: 12 Oct 2018, 06:08

09 Nov 2018, 23:20

Hi Again

Actually - when I run the site using 'npm start' and try and access it (from localhost:3000) - I see the same result as when I try and access the site using the Django url (localhost:8000).

How do I fix ?

Thanks
Dave

dave.ekhaus
Posts: 4
Joined: 12 Oct 2018, 06:08

10 Nov 2018, 00:01

Hi Again

I found the change that cause the 'npm start' scenario to stop working.

I removed the 'rel="stylesheet"' from the two <link ...> lines in index.html ...

After putting it back the way it was originally ...

<link id="theme-css" rel="stylesheet" type="text/css" href="%PUBLIC_URL%/assets/theme/theme-blue.css">
<link id="layout-css" rel="stylesheet" type="text/css" href="%PUBLIC_URL%/assets/layout/css/layout-blue.css">

makes it so that I can once again access the PrimeReact dashboard when I run the site using 'npm start'.

So - I'm back to a point where the site works when served by 'npm start' and accessed at localhost:3000 - but doesn't work after running 'npm run build' and accessed at localhost:8000 (static assets served by Django).

Any ideas ?

Thanks
Dave

merve7
Posts: 354
Joined: 12 Sep 2017, 10:44

03 Dec 2018, 09:25

Hi,
I'm sorry for the delay. Firstly, do you fix 'Resource interpreted as Stylesheet but transferred with MIME type text/html' issue? If not, did you generate css file with sass command?

Code: Select all

sass -w src/assets/ --sourcemap=none
You can see detail in http://primefaces.org/avalon-react/#/documentation.

Post Reply

Return to “Avalon - PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest