Syntax Error React.js

Question

I have completed the React/Elixir "learnphoenix.io" tutorial and I am on the Routes and Views part. I have a compilation error

ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (6:22)

  4 | import { default as Home } from   "./components/Home"
  5 | import { default as Settings } from   "./components/Settings"
> 6 | const App =   props   => (<div>{props.children}</div>)
    |                         ^
  7 | ReactDOM.render(
  8 |       <Router history={hashHistory}>
  9 |               <Route path="/" component={App}>

 @ multi main
webpack: bundle is now VALID.

I'm new to React so I don't understand very well.

EDIT1: There is the webpack.config.js :

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    './app/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'babel']
        },
        include: path.join(__dirname, 'app')
      }
    ]
  },
  resolve: {
    extensions: [ '', '.js' ]
  }
}

app/index.js :

import React from "react"
import ReactDOM from "react-dom"
import { Router, Route, IndexRoute, hashHistory }   from "react-router"
import { default as Home } from "./components/Home"
import { default as Settings } from "./components/Settings"
const   App =   props   => (<div>{props.children}</div>)
ReactDom.render(
        <Router history={hashHistory}>
                <Route path="/" component={App}>
                        <IndexRoute component={Home}/>
                        <Route path="settings"  component={Settings}/>
                </Route>
        </Router>,
        document.getElementById("root")
)

app/Home/index.js :

import React from "react"

export class Home extends React.Component {
  render() {
    return (<div>Home component</div>)
  }
}

export default Home

Possible duplicate of Syntax error in ReactJS - in short, you need to use a tool (most commonly Babel with the appropriate React/JSX modules enabled) to transpile JSX to JS. — Tom Fenech
– Tom Fenech, Commented Feb 3, 2017 at 14:44
did you included babel presets - ['es2015', 'stage-0', 'react'] — Rahul Singh
– Rahul Singh, Commented Feb 3, 2017 at 14:56
@TomFenech I did all there are in the topic but it don't work... It show me Module build failed: Error: Couldn't find preset "babel" relative to directory "/home/jeremy/Bureau/projets/phoenix-chat-frontend/app" — mjerem34
– mjerem34, Commented Feb 3, 2017 at 15:07
There is not babel preset. Add this: presets: ['es2015', 'stage-0', 'react']` — prosti
– prosti, Commented Feb 3, 2017 at 15:18

Hamburglar · Accepted Answer · 2017-02-03 14:51:51Z

1

This is correct jsx ES6 syntax but it looks like it is saved as .js.

You need to have a transpile step in the build proces, probably with Babel

answered Feb 3, 2017 at 14:51

Hamburglar

5503 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mjerem34 Over a year ago

I have installed npm install babel-preset-es2015 --save-dev npm install babel-preset-react --save-dev but it don't work ...

prosti Over a year ago

Correct syntax indeed.

Marco Scabbiolo Over a year ago

@mjerem34 you are not setting the presets in the babel configuration. See stackoverflow.com/questions/34963686/syntax-error-in-reactjs

flexicious.com Over a year ago

He has test: /\.js$/, so this is not a extension problem

prosti · Accepted Answer · 2017-02-03 15:17:37Z

1

Add this to your presets:

['es2015', 'stage-0', 'react']

This is not wrong

const App =   props   => (<div>{props.children}</div>)

And it should transpile to:

"use strict";

var App = function App(props) {
    return React.createElement(
        "div",
        null,
        props.children
    );
};

But you are missing react transpiler part. I duped the error in Babel in case I haven't used react tag.

Evaluate Presets: es2015, es2016, stage-1 Line Wrap Minify (Babili) Babel 6.22.1

repl: Unexpected token (1:26)
> 1 |     const App = props => (<div>{props.children}</div>)
    |                           ^

This is called the fat arrow syntax, the props is a parameter to the stateless function. You are setting te name App for the function and you are returning the JSX.

When you don't have react, JSX part cannot be transpiled and from there the error.

edited Feb 3, 2017 at 15:17

answered Feb 3, 2017 at 15:04

prosti

46.9k19 gold badges199 silver badges161 bronze badges

4 Comments

mjerem34 Over a year ago

I have added ['es2015', 'stage-0', 'react'] and I have no error but it don't show the page in firefox ... see initial post edit to see my Home/index.js content

prosti Over a year ago

Ask another question bro. This quest was about the error (@mjerem34).

prosti Over a year ago

@mjerem34, Please try to ✓the answer helped you best.

mjerem34 Over a year ago

Ok, I will try ... Thanks you

Collectives™ on Stack Overflow

Syntax Error React.js

2 Answers 2

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related