React Render giving Unexpected Token Error

Question

I have two React Apps. One the main app and other is just an app with 1 component. I've imported the component package as node_module using npm link . Can anyone help me how to solve this?

For the SubApp component the code is as follows:

render() {
    return (
      <div>
        External Element.
      </div>
    );
  }

And code for the MainApp component is:

export default class trial extends React.Component {
    render(){
        return(
            <div>
                <Extern/>
            </div>
        )
    }
}

The error is as follows:

../comp/src/extern.js
SyntaxError: /Users/risethi/Desktop/comp/src/extern.js: Unexpected token (13:6)
  11 |   render() {
  12 |     return (
> 13 |       <div>
     |       ^
  14 |         External Element.
  15 |       </div>
  16 |     );

This error arises when I try to open MainApp Component.

Answer 1

If you are using JSX, which you are, you should not store your files as .js, but as .jsx.

Normal JS files do not allow the usage of HTML elements in their files like that.