title: react.js with webpack Resource blocked due to MIME type mismatch
body: <p>Developing a react app with webpack, in my app.js router when i specify the route to be /foo the component renders normally but when i specify a route as /foo/bar i get the following error
  "The resource from “<a href="http://localhost:9000/foo/bar/bundle.js" rel="nofollow noreferrer">http://localhost:9000/foo/bar/bundle.js</a>” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)" </p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>function App() {
      return (
          &lt;div className="App"&gt;
              &lt;BrowserRouter&gt;
                  &lt;Router history={history}&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path="/api/login" component={Login} /&gt; //gives error
                          &lt;Route exact path="/login" component={Login} /&gt; //renders normally
                          &lt;Route component={Error} /&gt;
                      &lt;/Switch&gt;
                  &lt;/Router&gt;
              &lt;/BrowserRouter&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p><strong>Webpack.config.js</strong></p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  
  module.exports = {
      entry: path.resolve(__dirname, 'src/index'),
      output:{
          path: path.resolve(__dirname, 'dist'),
          filename: 'bundle.js',
      },
      module:{
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: [
                      {
                          loader: 'babel-loader',
                          options: {
                              presets: ['@babel/react']
                          }
                      }
                  ]
              },
              {
                  test: /\.css$/,
                  exclude: /node_modules/,
                  use:[
                      {loader: 'style-loader'},
                      {loader: 'css-loader'}
                  ]               
              },]
      },
      devServer:{
          contentBase: path.resolve(__dirname, 'dist'),
          port: 9000,
          historyApiFallback: true
      },
      plugins:[
          new HtmlWebpackPlugin({
              template: "src/index.html"
          })
      ]
  };
  </code></pre>