Hi all I work currently on Express and get this error message trying to open my index.html :
Refused to execute script from 'http://localhost:7500/app.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. - From localhost/:1 -
Basically I try currently for configuring MIME type since it seems the problem come from it.
here my tree structure :
.
├── dist
│ ├── app.bundle.js
│ ├── app.bundle.js.map
│ ├── index.html
│ ├── ninja.json
│ ├── picture.jpeg
│ ├── style.css
│ └── test.txt
├── package.json
├── package-lock.json
├── router
│ └── router.js
├── server
├── server.js
├── src
│ └── App.jsx
├── static
│ └── index.html
├── tsconfig.json
└── webpack.config.js
HTML :
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title> React Components </title>
</head>
<body>
<h2> 1 </h2>
<button style="height: 50px ; width : 250px ;" id="getText"> Get text </button>
<button style="height: 50px ; width : 250px ;" id="getUser"> Get user </button>
<button style="height: 50px ; width : 250px ;" id="getPosts"> GetPosts : Get API DATA </button>
<hr>
<div id="output"></div>
<form id="addPost">
<div>
<input type="text" id="title" placeholder="Title">
</div>
<div>
<textarea name="" id="body" cols="30" rows="10" placeholder="Body">
</textarea>
</div>
<input type="submit" value="Submit">
</form>
<script src="app.bundle.js"></script>
<img id='picture1' style='width : 125px ;' alt="">
</body>
</html>
JSX : App.jsx
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import 'isomorphic-fetch' ;
document.getElementById('getText').addEventListener('click', getText);
document.getElementById('getUser').addEventListener('click', getUser);
document.getElementById('getPosts').addEventListener('click', getPosts);
document.getElementById('addPost').addEventListener('submit', addPost);
function getText(){
fetch('/test.txt')
.then((res) => res.text()).
then((data) => document.getElementById('output').innerHTML = data ).
catch((err) => console.log(err));
};
function getUser(){
fetch('/ninja.json')
.then((res) => res.json())
.then((data) => {
let output = '<h2> Users </h2>';
data.forEach(function (user){
output += `
<ul> <li> ${user.username}</li>
<li> Location: ${user.location}</li>
<li> ${user.online} </li>
<li> ${user.followers}</li>
</ul>
`
});
document.getElementById('output').innerHTML = output;
});
}
function getPosts(){
fetch('http://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
let output = '<h2> Users </h2>';
data.forEach(function (post){
output += `
<div>
<h3> Title : ${post.title} </h3>
<p> Body : ${post.body} </p>
</div>
`
});
document.getElementById('output').innerHTML = output;
});
}
function addPost(e){
e.preventDefault() ;
let title = document.getElementById('title').value;
let body = document.getElementById('body').value;
fetch('http://jsonplaceholder.typicode.com/posts', {
method : 'POST',
headers : {
'Accept' : 'application/json, text//plain, */*',
'Content-type' : 'application/json'
},
body : JSON.stringify({ title : title, body : body })
})
.then((res) =>res.json())
.then((data) => console.log(data));
}
JS server.js
require("babel-polyfill");
var express = require('express');
var app = express();
var port = 7500 ;
app.get("/", (req, res) => {
res.sendFile(__dirname + "/dist/index.html");
});
app.listen(port, function() {
console.log('server started in port ' + port);
}) ;
app.use(express.static(__dirname + 'dist'));
package.json
{
"name": "reactdevelopment",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "./node_modules/.bin/nodemon ./server.js",
"devserver": "node_modules/.bin/webpack-dev-server --hot --inline",
"watch": "webpack --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2015-node4": "^2.1.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"create-react-class": "^15.6.3",
"node": "^10.0.0",
"nodemon": "^1.17.3",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-router": "^4.2.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"body-parser": "^1.18.2",
"es6-promise": "^4.2.4",
"express": "^4.16.3",
"fetch": "^1.1.0",
"isomorphic-fetch": "^2.2.1",
"mongo": "^0.1.0",
"mongod": "^2.0.0",
"mongodb": "^3.0.7",
"mongoose": "^5.0.16",
"source-map": "^0.7.2"
}
}
webpack.config.js
const webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: {
app: __dirname +'/src/App.jsx'
},
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\App.jsx$/,
loader: 'babel-loader',
query: {
presets: ['react','es2015']
}
}
]
},
devtool : '#source-map',
optimization : {
splitChunks: {
chunks: "async",
minSize: 3000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
devServer: {
port: 8000,
contentBase: 'static',
proxy: {
'/api/*': {
target: 'http://localhost:7500'
}
}
}
};
If you have advices, linked documentation , indication or hint it's would be great, Thank you
