title: How to display React app in IE? When it works fine in all other browsers localhost and production?
body: <p>I had a client complain to me that the production build of my React Application (no cli uses custom webpack configuration) is displaying fine in all browsers except for IE. It works in Chrome, Firefox, and Edge but it displays a blank page on IE. I opened up my IE browser and looked to see if it threw any errors any no errors are present in the console.</p>
  
  <p>I think the problem has to do with the way my webpack configuration is set up. Here it is:</p>
  
  <ol>
  <li>I already installed Isomorphic fetch and es6 promise dependency
  packages and using them for all my fetch requests. (I'm using async
  await for my promises) </li>
  <li>I tried adding targets to my custom webpack
  configuration to no success either.</li>
  </ol>
  
  <pre><code>const path = require("path");
  const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
  
  module.exports = {
    devServer: {
      contentBase: path.join(__dirname, "/public"),
      historyApiFallback: true,
      port: 3000,
      proxy: {
        "/api": "http://localhost:5000"
      }
    },
    entry: ["babel-polyfill", __dirname + "/src/index.js"],
    output: {
      path: path.join(__dirname, "/public"),
      filename: "bundle.js",
      publicPath: "/"
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            query: {
              presets: [
                [
                  "env",
                  {
                    targets: {
                      browsers: ["last 2 versions", "ie &gt;= 11"]
                    }
                  }
                ],
                "react",
                "stage-0"
              ]
            }
          }
        },
        {
          test: /\.css$/,
          use: [
            { loader: "style-loader" },
            { loader: "css-loader" },
            { loader: "sass-loader" }
          ]
        },
        {
          test: /\.(png|jpg)$/,
          use: {
            loader: "file-loader"
          }
        }
      ]
    },
    plugins: [
      // Disable code splitting as it's creating many duplicate bundle profiles
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
      }),
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
      }),
      new BrowserSyncPlugin({
        host: "localhost",
        port: 3312,
        files: [
          "./public/*.html",
          "./public/assets/scss/*.scss",
          "./public/assets/variables/*.scss",
          "./public/assets/mixins/*.scss",
          "./public/assets/reset/*.scss"
        ],
        proxy: "http://localhost:3000/"
      })
    ]
  };
  </code></pre>
  
  <p>This is my index.js file rendering the app</p>
  
  <pre><code>import ReactDOM from "react-dom";
  
  import { BrowserRouter as Router, Route, Link } from "react-router-dom";
  import routes from "./routes";
  
  ReactDOM.render(&lt;div&gt;{routes}&lt;/div&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>I expect to be able to see my React app in both localhost and production build for IE instead of not seeing anything for IE.</p>