Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React, babel, webpack not parsing jsx code

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.

like image 728
httpNick Avatar asked Nov 03 '15 21:11

httpNick


People also ask

Does Babel convert to JSX?

Babel can convert JSX syntax! Check out our React preset to get started. Use it together with the babel-sublime package to bring syntax highlighting to a whole new level. and add @babel/preset-react to your Babel configuration.

What does Babel do to JSX?

With JSX, it is easy to define UI components in React. JSX should not be implemented directly by browsers, but instead requires a compiler to transform it into ECMAScript. This is where Babel comes in. Babel acts as this compiler allowing us to leverage all the benefits of JSX while building React components.

Can your browser understand React JSX code?

Browsers can't read JSX because there is no inherent implementation for the browser engines to read and understand them. JSX is not intended to be implemented by the engines or browsers, it is intended to be used by various transpilers to transform these JSX into valid JavaScript code.

Can JSX be used without Babel?

1 Answer. Show activity on this post. React doesn't require babel but the library is built on the concept of using ES6 javascript syntax. React app however can be built with old ES5 syntax and JSX which would remove the need for Babel but you would lose the potential benefits of ES6.


2 Answers

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

like image 162
Abhinav Singi Avatar answered Nov 15 '22 12:11

Abhinav Singi


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

like image 38
dandel Avatar answered Nov 15 '22 13:11

dandel