title: MIME type ('text/html') is not executable, and strict MIME type checking is enabled
body: <p>Refused to execute script from '<a href="http://localhost:8080/edit/bundle.js" rel="noreferrer">http://localhost:8080/edit/bundle.js</a>' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.</p>
  
  <p>I am using react-router and i got this error while using </p>
  
  <pre><code>&lt;Route path="/edit/:id" component={EditExpensePage} /&gt;
  </code></pre>
  
  <p>it is working fine with just /edit but giving error on /edit/:id. I don't understand why this is happening. 
  Here are the files: 
  This is the AppRouter file.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
  import Header from './../components/Header';
  import ExpenseDashboardPage from './../components/ExpenseDashboardPage';
  import AddExpenses from './../components/AddExpensePage';
  import EditExpensePage from './../components/EditExpensePage';
  import NotFoundPage from './../components/NotFoundPage';
  import HelpPage from './../components/HelpPage';
  
  const AppRouter = () =&gt; (
    &lt;BrowserRouter&gt;
    &lt;div&gt;
      &lt;Header /&gt;
      &lt;Switch&gt;
        &lt;Route path="/" component={ExpenseDashboardPage} exact={true} /&gt;
        &lt;Route path="/create" component={AddExpenses} /&gt;
        &lt;Route path="/edit/:id" component={EditExpensePage} /&gt;
        &lt;Route path="/help" component={HelpPage} /&gt;
        &lt;Route component={NotFoundPage} /&gt;
      &lt;/Switch&gt;
    &lt;/div&gt;
  &lt;/BrowserRouter&gt;
  );
  
  export default AppRouter;
  </code></pre>
  
  <p>This is the EditExpenses file: </p>
  
  <pre><code>import React from 'react';
  
  const EditExpensePage = (props) =&gt; {
    console.log(props);
    return (
      &lt;div&gt;
        &lt;p&gt;Edit your expenses Here&lt;/p&gt;
      &lt;/div&gt;
    );  
  }
  
  export default EditExpensePage;
  </code></pre>
  
  <p>Here is my Webpack config file:</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: './src/app.js',
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
    },
    module: {
      rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
        }
      }, {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ],
    devtool: 'cheap-module-eval-source-map',
    devServer: {
      historyApiFallback: true
    }
  }
  </code></pre>
  
  <p>And also the index.html file generated by new HtmlWebpackPlugin</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;title&gt;Expensify&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;script type="text/javascript" src="bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please Help me in resolving this issue.</p>