Using React with Lerna

Question

I am trying to build a proof-of-concept using Lerna and React.

Here's the repository:

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

So far, the above works if you run this:

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

In packages/app/src/App.js I am importing and rendering the Headline component (note, I used create-react-app to create this directory):

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;

The Headline component in packages/headline/index.jsx is using the React.createElement function:

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

And, as you can see, the function returning JSX is commented out.

... Now ... If I update this file to return JSX instead:

import React from 'react';

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

export default Headline

My app returns this error:

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>
| )

How do I export JSX from my Headline component?

Could it be that the compiler assumes you're trying to return React in your headline method? (Hello Lerna + React) Perhaps try a different message. — sesamechicken
Yup, I think so. Had to compile it and then import the compiled code. thx! — SeanPlusPlus

SeanPlusPlus SeanPlusPlus · Accepted Answer · 2018-05-04T19:24:33

Got it!

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

I needed to install babel and compile my headline component.

Using React with Lerna

1 Answers