Module parse failed:.You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

Question

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.

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 https://webpack.js.org/concepts#loa rs | import App from './components/App'; |

ReactDOM.render(,document.getElementById("app")); i ?wdm?: Failed to compile.**

Project structure Project structure image

Below are my files.

package.json

{
  "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"
  }
}

webpack.conf.js

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'),
    }),
  ]
};

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

</body>

</html>

App.js

import React,{Component}  from 'react';

class App extends Component{
  render() {
    return (
    <div><h1>Hello</h1></div>
  );

  }
};
export default App;

index.js

import React from 'react'
import ReactDOM from 'react-dom';

import App from './components/App';

ReactDOM.render(<App />,document.getElementById("app"));

misolo misolo · Accepted Answer · 2020-04-19T22:13:46

Looking at your package.json it seems that babel versions caused the error. If you use webpack 4.x you should use babel-loader 8.x and babel 7.x, see webpack - babel-loader

Try upgrade babel-*, You can take the todo list from Here

Module parse failed:.You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

1 Answers