Использование React с Lerna

Я пытаюсь создать доказательство концепции, используя Lerna и React.

Вот репозиторий:

https://github.com/SeanPlusPlus/lerna-react

Пока все вышеперечисленное работает, если вы запустите это:

git clone [email protected]:SeanPlusPlus/lerna-react.git
cd lerna-react
lerna bootstrap
cd packages/app
yarn start

В packages/app/src/App.js я импортирую и визуализирую компонент Headline (обратите внимание, я использовал create-react-app для создания этого каталога):

import React, { Component } from 'react';
import logo from './logo.svg';
import Headline from 'headline';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        { Headline }
      </div>
    );
  }
}

export default App;

Компонент Headline в packages/headline/index.jsx использует функцию React.createElement:

import React from 'react';

// const Headline = () => (
//   <h1>Hello Lerna + React</h1>
// )

const Headline = React.createElement('div', null,
  React.createElement('h1', null, 'Hello Lerna')
)

export default Headline

И, как видите, функция, возвращающая JSX, закомментирована.

... Теперь ... Если я обновлю этот файл, чтобы вместо него возвращался JSX:

import React from 'react';

const Headline = () => (
  <h1>Hello Lerna + React</h1>
)

export default Headline

Мое приложение возвращает эту ошибку:

Failed to compile.

../headline/index.jsx
Module parse failed: Unexpected token (4:2)
You may need an appropriate loader to handle this file type.
|
| const Headline = () => (
|   <h1>Hello Lerna + React</h1>
| )    

Как мне экспортировать JSX из моего Headline компонента?


person SeanPlusPlus    schedule 04.05.2018    source источник
comment
Может быть, компилятор предполагает, что вы пытаетесь вернуть React в методе заголовка? (Привет, Lerna + React) Возможно, попробуйте другое сообщение.   -  person sesamechicken    schedule 04.05.2018
comment
Ага, я так думаю. Пришлось скомпилировать его, а затем импортировать скомпилированный код. Спасибо!   -  person SeanPlusPlus    schedule 04.05.2018


Ответы (1)


Понятно!

https://github.com/SeanPlusPlus/lerna-react/tree/react-babel

Мне нужно было установить babel и скомпилировать свой headline компонент.

person SeanPlusPlus    schedule 04.05.2018
comment
Я тоже застрял в той же ситуации. судя по вашему ответу, действительно ли необходимо каждый раз собирать компоненты пакета? не можем ли мы иметь их как модули es6 и позволить webpack разрешать и переносить их? потому что я не хочу запускать мой babel start каждый раз, когда я что-то меняю в компонентах пакета. это замедлит развитие. если я не использую часы, которые считаю ненужными - person hannad rehman; 10.09.2018
comment
также как насчет компонентов, которые импортированы scss? - person hannad rehman; 11.09.2018
comment
--watch автоматически построит его - person Charanjit Singh; 11.08.2020