title: All the npm packages get uninstalled when installing a new package, react js application
body: <p>I am using a typescript-based start kit for my reactjs application. But, the problem is, everytime that I install a new npm package, all other previous packages (apparently) get uninstalled since I get an error of &quot;failed to load module ...&quot; and I have to install them again. I really appreciate any help. Here is my webpack config:</p>
  <pre><code>const {resolve} = require('path');
  const {CheckerPlugin} = require('awesome-typescript-loader');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    context: resolve(__dirname, '../../src'),
    module: {
      rules: [
        {
          test: /\.js$/,
          use: ['babel-loader', 'source-map-loader'],
          exclude: /node_modules/,
        },
        {
          test: /\.tsx?$/,
          use: ['babel-loader', 'awesome-typescript-loader'],
        },
        {
          test: /\.css$/,
          use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: ['autoprefixer']
                }
            }
        }],
        },
        {
          test: /\.(scss|sass)$/,
          loaders: [
            'style-loader',
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'sass-loader',
          ],
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          loaders: [
            'file-loader?hash=sha512&amp;digest=hex&amp;name=img/[hash].[ext]',
            'image-webpack-loader?bypassOnDebug&amp;optipng.optimizationLevel=7&amp;gifsicle.interlaced=false',
          ],
        },
        
      ],
    },
    devServer: {
      historyApiFallback: true,
    },
    plugins: [
      new CheckerPlugin(),
      new HtmlWebpackPlugin({template: 'index.html.ejs',}),
    ],
    externals: {
      'react': 'React',
      'react-dom': 'ReactDOM',
    },
    performance: {
      hints: false,
    },
  };
  </code></pre>
  <p>and here is the config for development mode:</p>
  <pre><code>const merge = require('webpack-merge');
  const webpack = require('webpack');
  const commonConfig = require('./common');
  
  module.exports = merge(commonConfig, {
    mode: 'development',
    entry: [
      'react-hot-loader/patch', // activate HMR for React
      'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
      'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
      './index.tsx' // the entry point of our app
    ],
    devServer: {
      hot: true, // enable HMR on the server
    },
    devtool: 'cheap-module-eval-source-map',
    plugins: [
      new webpack.HotModuleReplacementPlugin(), // enable HMR globally
    ],
  });
  </code></pre>
  <p>and package.json file:</p>
  <pre><code>  &quot;name&quot;: &quot;react-webpack-typescript-starter&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;description&quot;: &quot;Starter kit for React, Webpack (with Hot Module Replacement), Typescript and Babel.&quot;,
    &quot;keywords&quot;: [
      &quot;react&quot;,
      &quot;webpack&quot;,
      &quot;typescript&quot;,
      &quot;babel&quot;,
      &quot;sass&quot;,
      &quot;hmr&quot;,
      &quot;starter&quot;,
      &quot;boilerplate&quot;
    ],
    &quot;author&quot;: &quot;Viktor Persson&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;repository&quot;: {
      &quot;type&quot;: &quot;git&quot;,
      &quot;url&quot;: &quot;git+https://github.com/vikpe/react-webpack-typescript-starter.git&quot;
    },
    &quot;bugs&quot;: {
      &quot;url&quot;: &quot;https://github.com/vikpe/react-webpack-typescript-starter/issues&quot;
    },
    &quot;homepage&quot;: &quot;https://github.com/vikpe/react-webpack-typescript-starter&quot;,
    &quot;scripts&quot;: {
      &quot;build&quot;: &quot;yarn run build:css clean-dist &amp;&amp; webpack -p --config=configs/webpack/prod.js&quot;,
      &quot;clean-dist&quot;: &quot;rimraf dist/*&quot;,
      &quot;lint&quot;: &quot;eslint './src/**/*.{js,ts,tsx}' --quiet&quot;,
      &quot;start&quot;: &quot;yarn run start-dev &quot;,
      &quot;start-dev&quot;: &quot;webpack-dev-server --config=configs/webpack/dev.js&quot;,
      &quot;start-prod&quot;: &quot;yarn run build &amp;&amp; node express.js&quot;,
      &quot;test&quot;: &quot;jest --coverage --watchAll --config=configs/jest.json&quot;,
      &quot;build:css&quot;: &quot;postcss src/styles/tailwind.css -o src/styles/global.css&quot;,
      &quot;watch:css&quot;: &quot;postcss src/styles/tailwind.css -o src/styles/global.css&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/cli&quot;: &quot;^7.10.5&quot;,
      &quot;@babel/core&quot;: &quot;^7.10.5&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.10.4&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.10.4&quot;,
      &quot;@types/jest&quot;: &quot;^26.0.5&quot;,
      &quot;@types/node&quot;: &quot;^14.11.10&quot;,
      &quot;@types/react&quot;: &quot;^16.9.43&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^3.6.1&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^3.6.1&quot;,
      &quot;awesome-typescript-loader&quot;: &quot;^5.2.1&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;css-loader&quot;: &quot;^3.6.0&quot;,
      &quot;eslint&quot;: &quot;^7.5.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^6.11.0&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.1.4&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.20.3&quot;,
      &quot;express&quot;: &quot;^4.17.1&quot;,
      &quot;file-loader&quot;: &quot;^6.0.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.3.0&quot;,
      &quot;image-webpack-loader&quot;: &quot;^6.0.0&quot;,
      &quot;jest&quot;: &quot;^26.1.0&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;prettier&quot;: &quot;^2.0.5&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-hot-loader&quot;: &quot;^4.12.21&quot;,
      &quot;rimraf&quot;: &quot;^3.0.2&quot;,
      &quot;sass-loader&quot;: &quot;^9.0.2&quot;,
      &quot;style-loader&quot;: &quot;^1.2.1&quot;,
      &quot;typescript&quot;: &quot;^3.9.7&quot;,
      &quot;uglifyjs-webpack-plugin&quot;: &quot;^2.2.0&quot;,
      &quot;webpack&quot;: &quot;^4.43.0&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
      &quot;webpack-dev-middleware&quot;: &quot;^3.7.2&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;,
      &quot;webpack-merge&quot;: &quot;^4.2.2&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@nivo/line&quot;: &quot;^0.63.1&quot;,
      &quot;@welldone-software/why-did-you-render&quot;: &quot;^5.0.0-rc.1&quot;,
      &quot;autoprefixer&quot;: &quot;^10.0.1&quot;,
      &quot;axios&quot;: &quot;^0.20.0&quot;,
      &quot;postcss&quot;: &quot;^8.1.1&quot;,
      &quot;postcss-cli&quot;: &quot;^8.0.0&quot;,
      &quot;postcss-loader&quot;: &quot;^4.0.3&quot;,
      &quot;purgecss&quot;: &quot;^3.0.0&quot;,
      &quot;react-date-range&quot;: &quot;^1.1.3&quot;,
      &quot;react-datepicker&quot;: &quot;^3.3.0&quot;,
      &quot;react-hook-form&quot;: &quot;^6.9.4&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-select&quot;: &quot;^3.1.0&quot;,
      &quot;react-toastify&quot;: &quot;^6.0.9&quot;,
      &quot;styled-components&quot;: &quot;^5.2.0&quot;,
      &quot;tailwindcss&quot;: &quot;^1.8.11&quot;
    }
  }
  
  </code></pre>