Gum Joe Gum Joe - 1 year ago 211
Javascript Question

Webpack throws syntax error for JSX

When I attempted to use webpack to compile my react jsx code, I received the following error:

ERROR in ./client/index.js
Module parse failed: C:\Users\Gum-Joe\Documents\Projects\bedel/client\index.js Unexpected token (6:11)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (6:11)
at Parser.pp.raise (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:920:13)
at Parser.pp.unexpected (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1483:8)
at Parser.pp.parseExprAtom (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:330:12)
at Parser.pp.parseExprSubscripts (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:225:19)
at Parser.pp.parseMaybeUnary (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:204:17)
at Parser.pp.parseExprOps (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:151:19)
at Parser.pp.parseMaybeConditional (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:133:19)
at Parser.pp.parseMaybeAssign (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:110:19)
at Parser.pp.parseExpression (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:86:19)
at Parser.pp.parseReturnStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1854:26)
at Parser.pp.parseStatement (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1719:19)
at Parser.pp.parseBlock (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:1991:21)
at Parser.pp.parseFunctionBody (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:607:22)
at Parser.pp.parseMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:576:8)
at Parser.pp.parseClassMethod (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2137:23)
at Parser.pp.parseClass (C:\Users\Gum-Joe\Documents\Projects\bedel\node_modules\acorn\dist\acorn.js:2122:10)
@ ./client/index.js 1:0-20


"presets": ["es2015", "react"]


// Webpack config
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {

// Use client as our root
context: __dirname + "/client",
// Entry file
entry: "./index.js",
// Resolve
resolve: {
extensions: ['', '.js', '.jsx']
// Output to /build
output: {
path: path.join(__dirname, "build", "js"),
filename: "bundle.js"
loaders: [
{ test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
// Plugins
plugins: [
new HtmlWebpackPlugin({
title: 'Bedel',
filename: path.join(__dirname, 'views', 'index.ejs'),
template: path.join(__dirname, 'client', 'templates', 'index.ejs')


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

class App extends React.Component {
render () {
return <p> Hello React</p>;

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

I have installed all the babel presets required, as well as
I have looked at the following answers already:

Edit: After commenting out my jsx syntax, the outputting
does not appear to have been transformed by babel (i.e. I can see ES6 code in it)

Edit: Sorry for the inconvenience, but
was a solution that I tried that involved putting the logic that should be in
into a separate file.

Edit: Here is a list of the solutions I tried that did not work:

  • Copy

  • Change test to test for
    instead of

  • Separate app logic into separate file (

  • Put presets to use in webpack config

Also, I have pushed my code to my GitHub repo ( Feel free to have a look at it.

Answer Source

The loaders property must exist within the modules property. Webpack Loaders

module.exports = {
  // ...

  // Output to /build
  output: {
    path: path.join(__dirname, "build", "js"),
    filename: "bundle.js"

  module: {
    loaders: [
      { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download