Xtykutl

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]

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.