title: Refused to execute script from because its MIME type (...) and strict MIME type (...)
body: <p>Hi all I work currently on Express and get this error message trying to open my index.html : </p>
  
  <p>Refused to execute script from '<a href="http://localhost:7500/app.bundle.js" rel="nofollow noreferrer">http://localhost:7500/app.bundle.js</a>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. - From localhost/:1 -</p>
  
  <p>Basically I try currently for configuring MIME type since it seems the problem come from it. </p>
  
  <p>here my tree structure : </p>
  
  <pre><code>.
  ├── 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
  </code></pre>
  
  <p>HTML : </p>
  
  <pre><code>index.html
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt; React Components &lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
        &lt;h2&gt; 1 &lt;/h2&gt;
  
    &lt;button style="height: 50px ; width : 250px ;" id="getText"&gt; Get text &lt;/button&gt;
    &lt;button style="height: 50px ; width : 250px ;" id="getUser"&gt; Get user &lt;/button&gt;
    &lt;button style="height: 50px ; width : 250px ;" id="getPosts"&gt; GetPosts : Get API DATA &lt;/button&gt;
  &lt;hr&gt;
  
  &lt;div id="output"&gt;&lt;/div&gt;
  &lt;form  id="addPost"&gt;
  
    &lt;div&gt;
      &lt;input type="text" id="title" placeholder="Title"&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
        &lt;textarea name="" id="body" cols="30" rows="10" placeholder="Body"&gt;
  
        &lt;/textarea&gt;
    &lt;/div&gt;
  
    &lt;input type="submit" value="Submit"&gt;
    &lt;/form&gt;
    &lt;script src="app.bundle.js"&gt;&lt;/script&gt;
  
    &lt;img id='picture1' style='width : 125px ;' alt=""&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JSX :
  App.jsx</p>
  
  <pre><code>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) =&gt;  res.text()).
  then((data) =&gt; document.getElementById('output').innerHTML = data ).
  catch((err) =&gt; console.log(err));
  };
  
  
  function getUser(){
  fetch('/ninja.json')
  .then((res) =&gt; res.json())
  .then((data) =&gt; {
      let output = '&lt;h2&gt; Users &lt;/h2&gt;';
          data.forEach(function (user){
              output += `
                  &lt;ul&gt;                &lt;li&gt; ${user.username}&lt;/li&gt;
                      &lt;li&gt; Location: ${user.location}&lt;/li&gt;
                      &lt;li&gt; ${user.online} &lt;/li&gt;
                      &lt;li&gt; ${user.followers}&lt;/li&gt;
              &lt;/ul&gt;
              `
      });
      document.getElementById('output').innerHTML = output;
  });
  }
  
  function getPosts(){
  fetch('http://jsonplaceholder.typicode.com/posts')
  .then((res) =&gt; res.json())
  .then((data) =&gt; {
      let output = '&lt;h2&gt; Users &lt;/h2&gt;';
          data.forEach(function (post){
              output += `
                  &lt;div&gt;
                  &lt;h3&gt; Title : ${post.title} &lt;/h3&gt;
                  &lt;p&gt; Body : ${post.body} &lt;/p&gt;
              &lt;/div&gt;
              `
      });
      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) =&gt;res.json())
          .then((data) =&gt; console.log(data));
  }
  </code></pre>
  
  <p>JS 
  server.js</p>
  
  <pre><code>require("babel-polyfill");
  var express = require('express');
  var app = express();
  var port = 7500 ;
  
  
  app.get("/", (req, res) =&gt; {
   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\" &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>webpack.config.js </p>
  
  <pre><code>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'
        }
      }
    }
  };
  </code></pre>
  
  <p>If you have advices, linked documentation , indication or hint it's would be great, 
  Thank you</p>