title: You may need an appropriate loader to handle this file type error occurs in ReactJS file
body: <p>I have divided my configuration in to two production and development mode and merging them using webpack-merge.</p>
  
  <p><a href="https://i.stack.imgur.com/vWphu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vWphu.png" alt="enter image description here"></a></p>
  
  <p>Whenever i try to build or run the code it gives me you may need an appropriate loader error even though i have define loader for the jsx or js files.</p>
  
  <p>Common Config File code is here...</p>
  
  <pre><code>const path = require("path");
  const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
  const webpack = require('webpack'); //to access built-in plugins
  
  module.exports = {
      entry : "./src/index.js",
      module: {
          rules: [
              {
                  test: /\.scss$/,
                  use: [
                      "style-loader",
                      "css-loader",
                      "sass-loader"
                  ]
              },
              {
                  test: /.(js|jsx)$/,
                  loader: 'babel-loader',
                  exclude: /node_modules/,
                  query: {
                  presets: ['es2015', 'react']
                  }
              }
          ]
      },
      plugins: [
          new webpack.ProgressPlugin(),
          new HtmlWebpackPlugin({template: './src/index.html'})
      ]
  }
  </code></pre>
  
  <p>Production Config Code is</p>
  
  <pre><code>const path = require("path");
  const common = require("./webpack.config");
  const merge = require("webpack-merge");
  
  module.exports = (common, {
      mode : "production",
      output: {
          filename : "bundle.[contentHash].js",
          path : path.resolve(__dirname, "dist")
      }
  });
  </code></pre>
  
  <p>Development Config Code</p>
  
  <pre><code>const path = require("path");
  const common = require("./webpack.config.js");
  const merge = require("webpack-merge");
  
  module.exports = (common, {
      mode : "development",
      output: {
          filename : "bundle.js",
          path : path.resolve(__dirname, "dist")
      }
  });
  </code></pre>
  
  <p>index.js code</p>
  
  <pre><code>import "./assets/scss/main.scss";
  import React from 'react';
  import ReactDOM from 'react-dom';
  
  class App extends React.Component {
    render() {
      return &lt;h1&gt;Hello&lt;/h1&gt;
    }
  }
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>.babelrc code </p>
  
  <pre><code>{
      "presets": ["env", "react","@babel/preset-env"],
      "plugins": [
          "transform-class-properties"
      ]
  }
  </code></pre>