-3

Please note that I read the following StackOverflow post and it did not help: Stylesheet not loaded because of MIME type

I can create a static public folder using Express.js where the index.html can recognize the style.css and tool.js files (located in the public subfolders of css and js, respectively). I used this line in the index.html file:

<link rel="stylesheet" href="css/style.css">
<script src="js/tool.js" defer></script>

and this line in app.js:

app.use(express.static("public"))

Ok: This works. Now, I do not want to use a static folder and want to handle the requests one by one. So instead of defining an express static public folder, I use the following line:

app.get("/",(req,res) => {
    res.sendFile('./public/index.html', {root: __dirname})
})

Please note that I removed app.use(express.static("public")) from the code at this stage.This works for deploying the index.html (located in the public folder), but the index.html file does not recognize the CSS style sheet.

I tried the following alternatives for the CSS file path:

<link rel="stylesheet" href="public/css/style.css">
<link rel="stylesheet" href="/public/css/style.css">
<link rel="stylesheet" href="./css/style.css">

Similarly, I tried alternative paths for tool.js, for example:

<link rel="stylesheet" href="/public/js/tool.js">

which did not work.

This is a sample of the error messages:

Refused to apply style from 'https://www.example.com/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. www.example.com/:9 GET https://www.example.com/js/tool.js net::ERR_ABORTED 404 (Not Found) www.example.com/:1 Refused to execute script from 'https://www.example.com/js/tool.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Ultimately, I put the style.css file and tool.js next to index.html file with the following link paths:

link rel="stylesheet" href="style.css">

which did not work and showed that getting the path to the css and js files was not the primary problem, given that I got the same above-mentioned error messages.

How can I fix this without using app.use(express.static("public")).

EricandWeb
  • 25
  • 6
  • You will have to write `app.get("/is/file.js",(req,res) => { res.sendFile('./public/js/file.js', {root: __dirname}) })` for each is and css file that you have – Konrad Oct 16 '22 at 19:30

1 Answers1

2

How can I fix this without using app.use(express.static("public")).

You could write an explicit route for every single file you want to serve, just like you did for /.

So you'd need:

app.get("/js/tool.js",(req,res) => {
    res.sendFile('./public/js/tool.js', {root: __dirname})
})

… etc.

Note that the static middleware does more than simply serving files. It also handles things such as setting sensible HTTP headers that aid caching. I strongly recommend using it over sendFile.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I added that line (both for js and CSS). I still get the same error messages. – EricandWeb Oct 16 '22 at 19:43
  • Then the URL in your `` doesn't match the URL as the first argument to `get`. Or the path you pass to `sendFile` is wrong. – Quentin Oct 16 '22 at 19:44
  • Quentin, thanks for replying to my post anyway. I appreciated it. – EricandWeb Oct 16 '22 at 19:49
  • @EricandWeb — I don't know what you are doing wrong, but the advice I gave works: https://imgur.com/a/54lpdgO – Quentin Oct 16 '22 at 19:52
  • And the browser's network tab shows the request is going to those URLs? And what the response is (including the HTTP status code)? And you are running *that* version of the code (and not testing an old version still in memory from before the last time you restarted the server program)? – Quentin Oct 16 '22 at 20:04
  • Your answer is correct. Thanks a lot for continuing to help. – EricandWeb Oct 16 '22 at 20:08