Реактивный рендер с неожиданной ошибкой токена

Question

У меня есть два приложения React. Одно основное приложение, а другое - просто приложение с 1 компонентом. Я импортировал пакет компонента как node_module, используя npm link. Может кто-нибудь помочь мне, как решить эту проблему?

Для компонента SubApp код выглядит следующим образом:

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

И код для компонента MainApp:

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

Ошибка выглядит следующим образом:

../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 |     );

Эта ошибка возникает при попытке открыть компонент MainApp.

Answer 1

Если вы используете JSX, которым вы являетесь, вы не должны хранить свои файлы как .js, а как .jsx.

Обычные файлы JS не позволяют использовать элементы HTML в своих файлах, как это.