React, babel, webpack not parsing jsx code
Solution 1
First of all: if you are using React v^0.14, you should render your code using React-Dom. https://www.npmjs.com/package/react-dom
Second, this should resolve your problem: babel-loader jsx SyntaxError: Unexpected token
Solution 2
You need to add presets to your babel-loader:
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
presets: ['es2015', 'react']
},
http://babeljs.io/docs/plugins/#presets
Solution 3
I'm currently using React 0.14.3. The ReactDOM solution did not work, nor did adding the babel presets into the webpack.config.js. Basically, those solutions appear to work only if you have a single loader defined, but I had both the babel-loader as well as the react-hot loader.
What DID work was to install the babel react presets module:
npm install babel-preset-react
and then create a .babelrc file in my project directory with the following:
{
"presets": ['react']
}
This is documented at http://babeljs.io/docs/plugins/preset-react/, as pointed to by Abhinav Singi
Solution 4
For me the answer was to include the presets in the query block:
query: {
presets: ['react', 'es2015']
}
httpNick
Seattle C/Javascript hacker. Being able to gain knowledge and getting better in as many things CS/Programming as possible makes for a good day :D.
Updated on June 12, 2020Comments
-
httpNick almost 4 years
webpack.config.js
module.exports = { context: __dirname + "/app", entry: { javascript: "./app.js", html: "./index.html", }, resolve: { extensions: ['', '.js', '.jsx'] }, output: { filename: "app.js", path: __dirname + "/dist", }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader", }, { test: /\.html$/, loader: "file?name=[name].[ext]", }, ], }, }
package.json
{ "name": "react-webpack-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel": "^6.0.15", "babel-core": "^6.0.20", "babel-loader": "^6.0.1", "file-loader": "^0.8.4", "webpack": "^1.12.2" }, "dependencies": { "react": "^0.14.2" } }
app/app.js
import React from "react"; import Greeting from "./greeting"; React.render( <Greeting name="World"/>, document.body );
I have seen the exact same questions after searching around, but none of the answers seemed to apply to me. I am getting the following error when running
webpack
:ERROR in ./app.js
Module build failed: SyntaxError: path/to/project/react-webpack-project/app/app.js: Unexpected token (5:2)React.render( <Greeting name="World"/>, document.body );
I am not sure why I am getting this error still. I am guessing it has something to do with my webpack.config.js file, but not 100% what the problem is.
-
httpNick over 8 yearsI was following a pluralsight tutorial that was using this method of packing. I will try to follow along using this new way of packing it looks like. I couldn't get it to work even following the directions in the 2nd link.
-
dandel over 8 yearsToo bad :(. Let's try something: try to use a Babel version lower than 6.0.0
-
dranxo over 8 yearsthe second link didn't help me either. Is there a complete webpack/jsx/react hello world anywhere?
-
loekTheDreamer over 7 yearsIve been trying for hours, thanks this solved it for me.