Issues with MIME type while trying to fetch data from server

[entcode]

Hey Replit community!
While trying to dynamically open a page and display some data I fetched from Node.js server, I’ve got an error in the console Refused to execute script from 'https://.../js/act.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. In total I have 2 pages which fetch the data from server and display it in browser. With the first page (account.js) I have no problems, it works perfectly, but after connecting second page (which works the same way - gets server’s data and displays it) I’ve discovered this error. First page still works fine but the second doesn’t.
Repl: https://replit.com/@entcode/ejs?v=1

Also, the console shows an 404 error ‘act.js’ not found, however such file is presented and its directory is used via app.use(). Here are the screenshots:

When I include the contents of the script file into EJS file (pure <script></script> tags without src attribute specified), everything works fine. May it be a bug of Replit that doesn’t see the file?

What should I do to fix the error?

[WindLother]

When you declare routes in Express, the order matters. If one route matches, it might stop other routes from being checked.

In your case

app.get('/:user_email_id', function(req, res) { /*...*/ });

app.get('/:user_email_id/:action_name', function(req, res) { /*...*/ });

This will cause a problem because if you try to access /js/act.js , it’s going to match the /:user_email_id route, treating “js” as a user_email_id , hence the 404 error since it won’t find a corresponding user in the dbase object.

So the solution is to you rearrange your routes to ensure that static files are served before dynamic routes and fix the paths to the static files.

For example, the static file paths:

// Correct static file paths:
app.use(express.static(__dirname + '/public'));
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/js', express.static(__dirname + '/public/js'));
app.use('/img', express.static(__dirname + '/public/img'));

And then you move dynamic routes to the bottom of the code:

app.get('/:user_email_id', function(req, res) { /*...*/ });
app.get('/:user_email_id/:action_name', function(req, res) { /*...*/ });

[entcode]

Hey @WindLother ! Thanks for your response! I’ve tried rearranging the routes, but nothing dramatically changed. I still get the same two errors: 404 file not found and wrong MIME type. Could you check my Repl (https://replit.com/@entcode/ejs?v=1) again, please?
Thanks!

[entcode]

Hey @WindLother ! I’ve recently tried this solution, but got the same errors :"(
Could you check the Repl, please

[WindLother]

Did you tried clearing your browser’s cache? Or using an incognito browsing window?

[entcode]

Hello @WindLother ! I want to develop a website as a school project (for public use). As I understand, clearing the cache will solve the problem just for me, so other users may get the same errors. Am I right or this is a universal solution?
Thanks!

[WindLother]

This is a step just to see if the error is present in your code or within the browser.

Knowing where the error arise will help to solve the problem.

[entcode]

I followed your recommendation, @WindLother and cleared the browser’s cache and tried opening the webpage in private window, but nothing worked :"( Looks like there is an error in the code itself

[entcode]

Hey @WindLother ! I’m thinking, may it be just a bug of Replit? I’ve tried like every possible solution on stackoverflow, chatbot ai, etc but nothing worked. Should I report it?

[WindLother]

Can you invite me to your repl? I’ll try taking a look at the code (I’ll build backups too so don’t worry)

[entcode]

Well, I’ve figured out what was the problem. I don’t know why, but the absence of this tiny slash (pic attached) jammed the path to .js file and so browser was throwing 404 error. Now everything works fine. Anyway, thanks a lot for your time!