ReactJS: "SyntaxError: Unexpected token "

Question

I am very much new to React. The following is my first script.

But I am getting the following error.

Failed to compile

./src/components/Layout/index.js
Syntax error: Unexpected token (12:5)

  10 | const Layout = (props) => {
  11 |   return(
> 12 |     <>
     |      ^
  13 | 
  14 |    <Header />
  15 |    {props.children}

here is my Layout component code :

import React from 'react';
import Header from '../Header';


/**
* @author
* @function Layout
**/

const Layout = (props) => {
  return(
    <>

   <Header />
   {props.children}
   </>
   )

 }

export default Layout;

Any idea how to fix it?

Provide more information like your babel configuration and how you are compelling — Sagar
– Sagar, Commented Sep 27, 2021 at 13:20
And is your project setup to handle JSX in .js files? Or does it need to be .jsx — Brian Thompson
– Brian Thompson, Commented Sep 27, 2021 at 13:20
Have you tried adding a space after the word return? Or deleting the newline after the opening parenthesis? — Ron B.
– Ron B., Commented Sep 27, 2021 at 13:20
@novonimo thank you so much , its works after adding <React.Fragment>...</React.Fragment> , but can you explain me why this error appears with <> </> ? — Prototype
– Prototype, Commented Sep 27, 2021 at 13:30

nima · Accepted Answer · 2021-09-28 06:47:24Z

0

try using Fragment which came from the React library.

it provides an empty tag like <> </> but older versions of the JSX Babel plugin didn’t understand it.

as mentioned in the question's comments, it's an issue with your babel plugin version.

import React, {Fragment} from 'react';
import Header from '../Header';

const Layout = (props) => {
  return(
    <Fragment>
      <Header />
      {props.children}
   </Fragment>
   )

 }

export default Layout;

answered Sep 28, 2021 at 6:47

nima

8,99312 gold badges40 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

ReactJS: "SyntaxError: Unexpected token "

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related