I've used PythonAnywhere before, but this is the first project that utilizes a Django back end and React front end. What is strange is that if I run this exact project on localhost, there are no troubles at all. It is only when I host this website on PythonAnywhere do I get this error.
They're probably hard to see...
Refused to apply style from 'http://bluebirdteaching.pythonanywhere.com/static/css/2.8aa5a7f8.chunk.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Looking this up, I've come across this page a lot, but I just can't seem to make sense of the answers provided there. I just don't understand why this works on localhost, but not on PythonAnywhere.
I included the above image not just to show my index.html, but also to show the project directory as that seems to be necessary as the other post linked explains. If the answer I'm looking for is in that other post, I just can't make sense of it.
Again, everything works as expected when I run the project locally. Of course, thanks guys for any help. I've been going at this problem for a while now; any help/explanations would be a huge relief.
Edit: Here is the index.html file generated when I do npm run build. This is where all those chunk.css and chunk.js are referenced.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>BlueBird Teaching</title>
<link href="/static/css/2.f3cffc9e.chunk.css" rel="stylesheet">
<link href="/static/css/main.aa904fbe.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],f=r[2],c=0,s=[];c<p.length;c++)a=p[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(i&&i(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this.webpackJsonpreactapp=this.webpackJsonpreactapp||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var f=0;f<p.length;f++)r(p[f]);var i=l;t()}([])</script>
<script src="/static/js/2.f7026f3a.chunk.js"></script>
<script src="/static/js/main.f2b0e582.chunk.js"></script>
</body>
</html>
Solution
The reason why it was working locally but not on Heroku or PythonAnywhere was just because I needed to set out mapping for static files. Literally all I needed to do this whole time was python3 manage.py collectstatic.
