Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled

Tags:

node.js

I am using nodejs and webpack4, i am trying to link main.js file to index.html.I tried all the possible solutions on the web none of them seems to work for me..I am a newbie suggestions are welcome please let me know what i am doing wrong.

Here is the Error log what i am seeing:


GET http://localhost:3000/dist/main.js net::ERR_ABORTED
localhost/:1
Refused to execute script from 'http://localhost:3000/dist/main.js' 
because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

public/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title> 
</head>
<body>

    <form action="/" method="POST" accept-charset="utf-8">
        <input type="email" name="email" placeholder="Email">
        <input type="submit" name="submit">
    </form>

    <script type="text/javascript" src="dist/main.js"> </script>

</body>
</html>

/app.js

const express = require('express');
const app  = express();
const http = require('http');

//Middleware
app.use(express.static(__dirname + '/public' ));

app.post('/', function( req ,res){
    res.send("Success");
});

app.listen(3000, function(){
    console.log('Server running on port 3000');
});

File structure

news_letter //Root directory
|_ dist
|   |_ main.js
|_ public
|   |_ index.html
|_ src
|   |_ index.js
|_ app.js
like image 880
Goutham Nataraj Avatar asked Mar 12 '18 12:03

Goutham Nataraj


2 Answers

you need the main.js file to be in the public folder.

It looks like you put the main.js file in dist/ folder and index.html file in the public/ folder.

but you only set one directory in your app.js file as a "static files directory"

app.use(express.static(__dirname + '/public' ));

every path in the html is relative to the path in the public folder. So, move your dist/ folder into the public/ folder and everything should work

File structure

news_letter //Root directory
|_ public
|   |_ dist
|   |   |_ main.js
|   |_ index.html
|_ src
|   |_ index.js
|_ app.js
like image 149
Thatkookooguy Avatar answered Nov 02 '22 10:11

Thatkookooguy


In my case I also had to change the middleware line to:

app.use('/public', express.static(__dirname + '/public' ));

instead of:

app.use(express.static(__dirname + '/public' ));

The reason based on the documentation is:

However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve:

app.use('/static', express.static(path.join(__dirname, 'public')))
like image 43
A-Sharabiani Avatar answered Nov 02 '22 11:11

A-Sharabiani