title: React index.html rendered but react component does not
body: <p>i couldn't figure out why ReactDOM does't render my simple component but seems to keep and render just the plain index.html</p>
  
  <p><a href="https://i.stack.imgur.com/XjaZm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XjaZm.png" alt="enter image description here"></a></p>
  
  <p>package.json</p>
  
  <pre><code>    {
    "name": "client2",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "babel-node buildScripts/server.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "express": "^4.16.3",
      "path": "^0.12.7"
    },
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.4",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-0": "^6.24.1",
      "html-webpack-plugin": "^3.2.0",
      "webpack": "^4.8.3",
      "webpack-dev-middleware": "^3.1.3"
    },
    "babel": {
      "presets": [
        "es2015",
        "react"
      ],
      "env": {
        "presets": [
          "react-hmre"
        ]
      }
    }
  }
  </code></pre>
  
  <p>webpack.config.dev.js</p>
  
  <pre><code>import webpack from 'webpack'
  import path from 'path'
  
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  
  export default {
    devtool: 'inline-source-map',
    entry: [
      path.resolve(__dirname, 'src/index.js')  
     ],
    output: {
      path: path.resolve(__dirname, 'src'),
      publicPath: '/',
      filename: 'bundle.js'
    },
    module:{
      rules:[
          {test: /\.js$/ , loader:'babel-loader', exclude: '/node_modules/'},
          {test: /\.jsx$/ , loader:'babel-loader', exclude: '/node_modules/'}
      ]
    },
    plugins:[
      new HtmlWebpackPlugin({
          template: './src/index.html',
          filename: 'index.html',
          inject: 'body'
     })
    ] 
  }
  </code></pre>
  
  <p>buildScript/server.js</p>
  
  <pre><code>    import express from 'express';
  import path from 'path';
  import webpack from 'webpack';
  import config from '../webpack.config.dev';
  
  const compiler = webpack(config);
  
  /* var express = require('express')
  var path = require('path') */
  
  const port = 8081;
  const app = express();
  
  app.listen(port, function (error) {
      if(error) {
          console.log(error);
      }
  });
  
  app.get('/', function (req, res) {
      res.sendFile(path.join(__dirname, '../src/index.html'));
  });
  
  app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: true,
      publicPath: config.output.publicPath
  }));    
  </code></pre>
  
  <p>src/index.js</p>
  
  <pre><code>    import React from 'react';
  import ReactDOM from 'react-dom';
  
  class App extends React.Component {
      constructor(){
          super();
          console.log("App Hello")
      }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;h1&gt;Howdy from React!&lt;/h1&gt;
              &lt;/div&gt;
          )
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>src/index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;Hey!&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The only response i get is </p>
  
  <p><a href="https://i.stack.imgur.com/kXHlb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kXHlb.png" alt="enter image description here"></a></p>
  
  <p>With no logs from my index.js react "App".</p>
  
  <p>I've been trying several solutions, none happened aside from my express server not working. What might be the problem here ? Thank you very much !</p>