Unexpected token issue with jsx files React-Native

1
votes

So I just initialized a React Native project the other day and was trying to configure my eslint and for some reason I get an unexpected token < error on the return for my stateless JSX component. 

import React from 'react';

const User = () => {
  return (
    <>
      <Text>
        Hello!
      </Text>
    </>
  );
};

export default User

I am extending the default @react-native-community that the eslintrc file is initialized with. As another note I was trying to use the airbnb eslint configuration and that causes the unexpected token error on both js and jsx files at the same location. I was wondering if anyone knew the reason as to why I am getting this error. Thanks in advance for the help!

Fixed: As stated below my fix ended up being to install babel-eslint and set my parser to babel-eslint in the eslintrc file.

1
reactjsreact-native
It can be that the linters are not recognizing the short syntax for Fragments <>. Try using <React.Fragment>. - humanbean
Have tried using any element. Still didnt work. I tried to putting a Text element in there solo and it still yelled at me. - Aaron Hendrix
try this - humanbean
The above link by humanbean worked for me! I installed babel-eslint and set my parser to babel-eslint inside the eslintrc and it fixed everything. Thanks! - Aaron Hendrix
As from the above link, adding parser: 'babel-eslint' solved this for me. - jay surya

1 Answers

0
votes

You need to import React. 

import React from 'react   
const User = () => {
  return (
    <>
      <Text>
        Hello!
      </Text>
    </>
  );
};

export default User