error with webpack - You may need an appropriate loader to handle this file type

Question

I am learning react and trying to create a boilerplate with webpack. I followed a tutorial by traversy everything in his video works but on my computer, I get the error message that an appropriate loader is needed to handle a particular file type.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.export = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

And this is the file where the error is coming from

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

Here is the error message:

ERROR in ./src/index.js 5:16 Module parse failed: Unexpected token (5:16) You may need an appropriate loader to handle this file type. | import App from './components/App'; |

ReactDOM.render(, document.getElementById('app')); @ multi (webpack)-dev-server/client? http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]

Answer 1

Before you're able to use JSX syntax, you need to have a list of presets in a .babelrc file, in the root folder of your application.

Here's an example

{ 
  "presets": [
    "flow", 
    "es2015",
    "react"
   ]
}

In this example babel would account for a JSX React app, with ES2015 references and flow static typing syntax.

Take a look at this link for more information.