title: Module parse failed:.You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."
body: <p>I am facing the below error. I tried with all solutions mentioned in other post related to the same issue. But no luck. Please help.</p>
  
  <p>Error:- **ERROR in ./src/index.js 6:16 Module parse failed: Unexpected token (6:16) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <a href="https://webpack.js.org/concepts#loa" rel="nofollow noreferrer">https://webpack.js.org/concepts#loa</a> rs | import App from './components/App'; |</p>
  
  <p>ReactDOM.render(,document.getElementById("app")); i ?wdm?: Failed to compile.**</p>
  
  <p>Project structure
  <a href="https://i.stack.imgur.com/t1hNs.png" rel="nofollow noreferrer">Project structure image</a></p>
  
  <p>Below are my files.</p>
  
  <p>package.json</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "reactapps",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server --hot"
    },
    "author": "nivs",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "bable-loader": "0.0.1-security",
      "html-webpack-plugin": "^4.2.0",
      "webpack": "^4.42.1",
      "webpack-cli": "^3.3.11",
      "webpack-dev-server": "^3.10.3"
    },
    "dependencies": {
      "react": "^16.13.1",
      "react-dom": "^16.13.1"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>webpack.conf.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'build'),
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './build',
      publicPath: '/dist/'
    },
    module: {
      rules: [{
        test: /\.js$|jsx/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve('./index.html'),
      }),
    ]
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>.babelrc</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>App.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React,{Component}  from 'react';
  
  class App extends Component{
    render() {
      return (
      &lt;div&gt;&lt;h1&gt;Hello&lt;/h1&gt;&lt;/div&gt;
    );
  
    }
  };
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>index.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import ReactDOM from 'react-dom';
  
  import App from './components/App';
  
  ReactDOM.render(&lt;App /&gt;,document.getElementById("app"));</code></pre>
  </div>
  </div>
  </p>