React Module parse failed: Unexpected token

February 20, 2021

In React Application, When you using webpack with babel-loader. You will encounter the below error due to file type.

Error Message: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Chrome Debugger Image

In my scenario, I missed to include the “.JSX” file type in “webpack.config.js” file. So babel-loader doesn’t recognize the “.JSX” file types. Below are the modified webpack configuration file (includes .jsx).

module.exports = {
    entry: "./src/index.js",
    output: {
        "path": path.join(__dirname, "dist"),
        "filename": "bundle.js"
    },
    module: {
        rules: [{test: /\.(js|jsx)$/, exclude: /node_modules/, loader: "babel-loader"}]
    },
    devtool: "source-map"
}