title: React application sudden break and causes Appropriate loader Error
body: <p>I know this issue has been asked before , the solution was to create babel config file &amp; webpack file but it still doesnt solve the issue</p>
  <p>I was using a create react app and all this while it was working fine until I ran npm install. I am not too sure what caused it to break but now all it has is the appropriate loader error. I am NOT familiar with babel and webpack. So hopefully someone can shed some light here.</p>
  <p><a href="https://i.stack.imgur.com/quNsE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/quNsE.png" alt="enter image description here" /></a></p>
  <p>I have install the babel presets in package.json. Following is my package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;frontend&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@ant-design/icons&quot;: &quot;^4.7.0&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^6.1.1&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^6.1.1&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.18&quot;,
      &quot;@hookform/resolvers&quot;: &quot;^2.8.8&quot;,
      &quot;@reduxjs/toolkit&quot;: &quot;^1.8.0&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.5.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.2.1&quot;,
      &quot;antd&quot;: &quot;^4.19.1&quot;,
      &quot;axios&quot;: &quot;^0.26.1&quot;,
      &quot;babel-preset-es2015&quot;: &quot;^6.24.1&quot;,
      &quot;firebase&quot;: &quot;^9.6.7&quot;,
      &quot;lodash.debounce&quot;: &quot;^4.0.8&quot;,
      &quot;mdb-react-ui-kit&quot;: &quot;^2.4.0&quot;,
      &quot;moment&quot;: &quot;^2.29.3&quot;,
      &quot;otp-input-react&quot;: &quot;^0.3.0&quot;,
      &quot;qs&quot;: &quot;^6.10.5&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-dropdown-tree-select&quot;: &quot;^2.7.1&quot;,
      &quot;react-hook-form&quot;: &quot;^7.27.1&quot;,
      &quot;react-moment&quot;: &quot;^1.1.2&quot;,
      &quot;react-nestable&quot;: &quot;^1.3.0&quot;,
      &quot;react-redux&quot;: &quot;^7.2.6&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-scripts&quot;: &quot;^2.1.3&quot;,
      &quot;react-toastify&quot;: &quot;^8.2.0&quot;,
      &quot;socket.io-client&quot;: &quot;^4.4.1&quot;,
      &quot;yup&quot;: &quot;^0.32.11&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;, 
      &quot;babel-loader&quot;: &quot;^8.0.1&quot;,
      &quot;css-loader&quot;: &quot;^0.28.10&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^3.0.4&quot;,
      &quot;style-loader&quot;: &quot;^0.19.1&quot;,
      &quot;webpack&quot;: &quot;^4.0.0&quot;,
      &quot;webpack-cli&quot;: &quot;^2.0.14&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.0.0&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;PORT=4007 react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  </code></pre>
  <p>Following is my file structure</p>
  <p><a href="https://i.stack.imgur.com/72esH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/72esH.png" alt="enter image description here" /></a></p>
  <p>This is my .babelrc file</p>
  <pre><code>{
    &quot;presets&quot;: [&quot;@babel/preset-env&quot;, &quot;@babel/preset-react&quot;],
    &quot;plugins&quot;: [
      &quot;@babel/plugin-syntax-dynamic-import&quot;,
      &quot;@babel/plugin-proposal-class-properties&quot;
    ]
  }
  </code></pre>
  <p>This is webpack.config.js file</p>
  <pre><code>const webpack = require(&quot;webpack&quot;);
  const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  
  const port = process.env.PORT || 3000;
  
  module.exports = {
    mode: &quot;development&quot;,
    entry: &quot;./src/index.js&quot;,
    output: {
      filename: &quot;bundle.[hash].js&quot;,
    },
    devtool: &quot;inline-source-map&quot;,
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: &quot;babel-loader&quot;,
          exclude: /node_modules/,
          query: {
            presets: [&quot;es2015&quot;],
          },
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: &quot;style-loader&quot;,
            },
            {
              loader: &quot;css-loader&quot;,
              options: {
                modules: true,
                localsConvention: &quot;camelCase&quot;,
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: &quot;public/index.html&quot;,
        favicon: &quot;public/favicon.ico&quot;,
      }),
    ],
    devServer: {
      host: &quot;localhost&quot;,
      port: port,
      historyApiFallback: true,
      open: true,
    },
  };
  </code></pre>
  <p>Thank you.</p>
  <p>FOUND THE ANSWER
  Had to update react-scripts to ^5.0.0 and i removed babel.rc file and webpack config file</p>