{"id":169,"hash":"9b6d4435b2eade2dd744c0266c7393290e3603c5a4600f6b7c8793d6f308df15","pattern":"babel-loader jsx SyntaxError: Unexpected token","full_message":"I'm a beginner in React + Webpack.\n\nI found a weird error in my hello world web app.\n\nI'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx syntax.\n\nHere are my dependencies:\n\n\"devDependencies\": {\n  \"babel-core\": \"^6.0.14\",\n  \"babel-loader\": \"^6.0.0\",\n  \"webpack\": \"^1.12.2\",\n  \"webpack-dev-server\": \"^1.12.1\"\n},\n\"dependencies\": {\n  \"react\": \"^0.14.1\"\n}\n\nHere is my webpack.config.js\n\nvar path = require('path');\nmodule.exports = {\n  entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],\n  output: {\n    path: path.resolve(__dirname, 'build'),\n    filename: 'bundle.js'\n  },\n  module: {\n      loaders: [\n          { test: /\\.js$/, exclude: /node_modules/, loader: \"babel-loader\"}\n      ]\n  }\n};\n\nHere is my app/main.js\n\nvar React = require(\"react\");\nReact.render(<h1>hello world</h1>,document.getElementById(\"app\"));\n\nAnd this is the error message\n\nERROR in ./app/main.js\nModule build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)\n  1 | var React = require(\"react\");\n> 2 | React.render(<h1>hello world</h1>,document.getElementById(\"app\"));\n    |              ^\nat Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)\n\nThanks for you guys.","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"Add \"babel-preset-react\"\n\nnpm install babel-preset-react\n\nand add \"presets\" option to babel-loader in your webpack.config.js\n\n(or you can add it to your .babelrc or package.js: http://babeljs.io/docs/usage/babelrc/)\n\nHere is an example webpack.config.js:\n\n{ \n    test: /\\.jsx?$/,         // Match both .js and .jsx files\n    exclude: /node_modules/, \n    loader: \"babel\", \n    query:\n      {\n        presets:['react']\n      }\n}\n\nRecently Babel 6 was released and there was a major change:\nhttps://babeljs.io/blog/2015/10/29/6.0.0\n\nIf you are using react 0.14, you should use ReactDOM.render() (from require('react-dom')) instead of React.render(): https://facebook.github.io/react/blog/#changelog\n\nUPDATE 2018\n\nRule.query has already been deprecated in favour of Rule.options. Usage in webpack 4 is as follows:\n\nnpm install babel-loader babel-preset-react\n\nThen in your webpack configuration (as an entry in the module.rules array in the module.exports object)\n\n{\n    test: /\\.jsx?$/,\n    exclude: /node_modules/,\n    use: [\n      {\n        loader: 'babel-loader',\n        options: {\n          presets: ['react']\n        }\n      }\n    ],\n  }","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token","votes":346,"created_at":"2026-04-19T04:41:26.284902+00:00","updated_at":"2026-04-19T04:51:22.565597+00:00"}