cannot find module 'react'

[shubhang93]

Getting a weird module not found error, but if I remove this line, the app compiles and works fine

app.use(webpackHotServerMiddleware(compiler));

import html from "./htmlExtractor";
import React from "react"
import clientConfig from "../webpack.client.dev"
import serverConfig from "../webpack.server.dev"
import {ServerStyleSheet} from "styled-components";
import ReactDOMServer from 'react-dom/server'
import App from "../common/App";

const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
const webpack = require("webpack")

const compilers = [clientConfig, serverConfig]

const compiler = webpack(compilers)


const express = require("express")

const app = express()
app.use(webpackDevMiddleware(compiler, {serverSideRender: true}))
app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
app.use(webpackHotServerMiddleware(compiler));


app.get('/', function (req, res) {
  const stylesheet = new ServerStyleSheet()
  let reactClient = ReactDOMServer.renderToString(stylesheet.collectStyles(<App/>))
  let styleTags = stylesheet.getStyleTags()
  res.send(html({app: reactClient, styleTags}))
})

app.listen(3000, () => console.log("Server Running on " + "3000"))

I am getting this error upon running this
Error: Cannot find module 'react'

Webpack configs
Client

const webpack = require("webpack")
const path = require("path")

module.exports = {
  name     : "client",
  entry    : './client/index.js',
  output   : {
    path      : path.resolve(__dirname, 'public'),
    filename  : "client.bundle.js",
    publicPath: "/"
  },
  mode     : "development",
  target   : "web",
  module   : {
    rules: [
      {
        test   : /\.js$/,
        loader : "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use : [{loader: "url-loader", options: {limit: 8192}}]
      }
    ]
  },
  plugins  : [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    compress  : true,
    port      : 3001,
    hot       : true,
    headers   : {'Access-Control-Allow-Origin': '*'},
    publicPath: '/'
  }
}

Server

const webpack = require("webpack")
const path = require("path")
const nodeExternals = require("webpack-node-externals")

module.exports = {
  name  : "server",
  mode  : 'development',
  entry : './server/index.js',
  output: {
    path         : path.resolve(__dirname, 'public'),
    filename     : "server.bundle.js",
    publicPath   : "/"
  },

  devtool: 'source-map',

  target   : "node",
  externals: [nodeExternals()],
  module   : {
    rules: [
      {
        test  : /\.js$/,
        loader: "babel-loader"
      },
      {
        test: /\.(png|jpg|gif)$/i,
        use : [{loader: "url-loader", options: {limit: 8192}}]
      }
    ]
  }
}