Build CSS file refused by Heroku app deployment

发布于 2020-04-07 10:19:01

I have deployed a React + NodeJS app in Heroku and the deployment went well and worked for a few hours. However, after a cache deletion, it now refuses to load the page. The errors are the following ones:

Refused to apply style from 'https://flix-reloaded.herokuapp.com/src.78399e21.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

and

GET https://flix-reloaded.herokuapp.com/src.78399e21.js net::ERR_ABORTED 404 (Not Found)

The first one, the MIME error refers to a minified file produced by a Parcel build. It is called in a index.html file that lives inside the dist folder. This is the line calling it: <link rel="stylesheet" href="/src.78399e21.css">

Its twin .js file is also called within index.html: <script src="/src.78399e21.js"></script>

Problem 1): I don' know what to do to make the CSS file accepted. within it, there are some comments imported from the SCSS original files related to each component. I tried both to remove the comments and add the type of the file as CSS but it hasn't worked. It should be a subtle detail, but I don't know what else to attempt.

Problem 2: The JS file that Heroku is not finding it is at the same folder of the index.html. However, the routing of the app has been defined to have client (Router basename="/client") as root (https://flix-reloaded.herokuapp.com/client). If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).

I tried to run another Parcel build, commiting changes, clean caches, but nothing worked. Can anyone provide me some help? I'll be happy to provide further details if necessary.

The index.html file code that lives inside the dist folder (where the production files live):

<html>

<head>
  <title>myFlix</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/src.78399e21.css"></head>

<body>
  <div class="app-container"></div>
  <script src="/src.78399e21.js"></script>
</body>
</html>

Thanks in advance

Questioner

cgobbet

Viewed

164

Chinese

Original

cgobbet 2020-02-01 20:52:57

Thanks, @ceejavoz, it worked. I have manually written the path to both files. The css file was valid, the problem was just the path. However, I believe this is just a temporary fix, because I need to find out why the build that Parcel creates outputs that defective path inside dist. When I find the culprit, I will update this answer. But thanks in any case (you solved it).

Build CSS file refused by Heroku app deployment

Related issues