title: Unable to start my react application and getting error in webpack server
body: <p>I don't know where am going wrong</p>
  <p>Am not sharing all package.json but whatever required am sharing.</p>
  <p>here is my package.json</p>
  <pre><code>     &quot;scripts&quot;: {
       &quot;develop&quot;: &quot;webpack serve --hot --port 8080 --disable-host-check --config webpack.develop.js&quot;,       
      },
       &quot;engines&quot;: {
          &quot;node&quot;: &quot;&gt;=10&quot;
      },
      &quot;devDependencies&quot;: {
   &quot;react-hot-loader&quot;: &quot;^4.12.20&quot;,
          &quot;react-test-renderer&quot;: &quot;^17.0.1&quot;,
          &quot;typescript&quot;: &quot;4.1.2&quot;,
          &quot;webpack&quot;: &quot;^5.70.0&quot;,
          &quot;webpack-bundle-analyzer&quot;: &quot;^4.2.0&quot;,
          &quot;webpack-cli&quot;: &quot;^4.9.2&quot;,
          &quot;webpack-dev-server&quot;: &quot;^4.7.4&quot;
      }
  </code></pre>
  <p>web.develop.js</p>
  <pre><code>const commonConfig = require('./webpack.config')
  
  module.exports = {
      ...commonConfig,
      output: {
          ...commonConfig.output,
          publicPath: 'http://localhost:8080/',
      },
      mode: 'development',
      module: {
          rules: [
              ...commonConfig.module.rules,
              {
                  test: /\.(js|jsx|ts|tsx)?$/,
                  use: 'react-hot-loader/webpack',
                  include: /node_modules/,
              },
          ],
      },
      devServer: {
          index: 'index.html',
          hot: &quot;only&quot;, // hot:true
          headers: {
              'Access-Control-Allow-Origin': '*',
              'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
              'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
          },
      },
      plugins: [...commonConfig.plugins],
  }
  </code></pre>
  <p>error:</p>
  <pre><code>[webpack-cli] Error: Unknown option '--disable-host-check'
  [webpack-cli] Run 'webpack --help' to see available commands and options
  </code></pre>
  <p>if i use this command</p>
  <pre><code>&quot;develop&quot;: &quot;webpack serve --hot --port 8080 --allowed-hosts all --config webpack.develop.js&quot;
  </code></pre>
  <p>am getting below error</p>
  <pre><code>[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
   - options has an unknown property 'index'. These properties are valid:
     object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?,
  onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
  </code></pre>
  <p>i removed index and localhost up and running but build.js is not created in dist folder.</p>
  <p>webpack.config.js</p>
  <pre><code>const fs = require('fs')
  const path = require('path')
  const webpack = require('webpack')
  const dotenv = require('dotenv')
  
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
      .BundleAnalyzerPlugin
  
  // Create .env file if it does not exist
  if (!fs.existsSync('.env')) {
      fs.copyFileSync('.env_example', '.env')
  }
  dotenv.config()
  if (!process.env.POSTS_SERVER_URL) {
      // webpack 5 is stricter about environment variables. The POSTS_SERVER_URL
      // environment variable was not mentioned in the README so default it for
      // those developers who may have created a .env file without the variable.
      process.env.POSTS_SERVER_URL = 'http://127.0.0.1:3000'
  }
  
  const PATHS = {
      app: path.join(__dirname, 'src/index.tsx'),
  }
  
  module.exports = {
      entry: {
          app: PATHS.app,
      },
      output: {
          path: __dirname + '/dist',
          filename: 'bundle.js',
      },
      module: {
          rules: [{
              test: /\.(js|jsx|ts|tsx)$/,
              loader: 'babel-loader',
              exclude: /node_modules/,
              include: /src/,
              sideEffects: false,
          }, 
          { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'file-loader'},
          {
              test: /\.(scss|css)$/,
              use: [
                  {
                  loader: 'style-loader'
                  },
                  {
                  loader: 'css-loader',
                  options: {
                      modules: {
                          localIdentName: &quot;[hash:base64]&quot;,
                          auto: true
                      },
                      sourceMap: true
                  }
                  },
                  {
                  loader: 'sass-loader'
                  }
              ]
          }
      ],
      },
      resolve: {
          extensions: ['.tsx', '.ts', '.js', '.css'],
          modules: [__dirname,
              'node_modules'
          ],
          fallback: { buffer: false },
      },
      devtool: 'source-map'
  }
  </code></pre>
  <p>Can anyone suggest me where is my configuration is going wrong</p>