CODEWITHSUNDEEP
webpackbabeljs
BlackHoleGalaxy
BlackHoleGalaxy

Reputation: 9662

Webpack error parsing JSX file using Babel loader

I tried to follow a tutorial to get react work and explore the great possibilties of this framework.

But while running webpack to bundle my react app, I encounter an error:

ERROR in ./public/app.jsx

Module build failed: SyntaxError: Unexpected character ' '

   |   <Greeter></Greeter>,
   |   document.getElementById('app')
>  | );
   |   ^
   |

Here is the webpack.config.js file:

module.exports = {
  entry: './public/app.jsx',
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        query: {
          presets:['react', 'es2015']
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      }
    ]
  }
};

My file is a simple JSX, nothing fancy but displaying hello:

var React = require('react');
var ReactDOM = require('react-dom');

var Greeter = React.createClass({

  // Render view
  render: function () {
    return (
      <div>
        Hello {/* Pass the function to child component */}
      </div>
    );
  }
});

let displayName = 'Galaxy';
ReactDOM.render(
  <Greeter></Greeter>,
  document.getElementById('app')
);

My package.json file contains as dependencies:

"dependencies": {
    "express": "^4.14.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "webpack": "^1.14.0"
  }

Do I have an error in my webpack config?

Upvotes: 1

Views: 432

Answers (1)

Tholle
Tholle

Reputation: 112787

Webpack can't parse the unexpected character ' '. You probably copied some code that contained characters that are not visible in your editor.

Upvotes: 1

Related Questions