Error when importing JSX files from another package in monorepo with React

Question

I created a simple project to study monorepo. The example consists of three React applications, where one consists of a lib of components with the Storybook and the other two will import the components of this package.

However I am not able to import a component from another package. When I import a common function, no error occurs.

Github repository

Error message

../components/src/button/Button.js
SyntaxError: /home/thiago/Documentos/Dev/projects/learn-monorepo/packages/components/src/button/Button.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:5):

   5 | function Button({label, ...rest}) {
   6 |   return (
>  7 |     <div>
     |     ^
   8 |       <button {...rest}>
   9 |         {label}
  10 |       </button>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Button component

function Button({label, ...rest}) {
  return (
    <div>
      <button {...rest}>
        {label}
      </button>
    </div>
  );
}

export { Button };

App.js

import React from 'react';
import { Button } from '@project/components';

function App() {
  return (
    <div>
      <h1>Hello World - App 01</h1>
      <Button label="Button"/>
    </div>
  );
}

export default App;

Package.json

{
  "name": "project",
  "version": "1.0.0",
   "main": "build/index.js",
  "author": "thiago <[email protected]>",
  "license": "MIT",
  "private": true,
  "workspaces": {
    "packages": ["packages/*"]
  },
  "babel": {
    "presets": [
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-syntax-jsx"
    ]
  },
  "scripts": {
    "bootstrap": "lerna bootstrap",
    "start:app-01": "lerna run --scope @project/app-01 start",
    "start:app-02": "lerna run --scope @project/app-02 start",
    "start:storybook": "lerna run --scope @project/components storybook",
    "start:web": "yarn start:app-01 & yarn start:app-02 & yarn start:storybook"
  },
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.12.1",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "8.1.0",
    "lerna": "^3.22.1"
  }
}

Answer 1

You get error because you have not transpiled your shared react components. There are some (not official) solutions for this with create-react-app. One of them is to use react-app-rewired and customize-cra. Instal lthem as dev-dependency and add a config-overrides.js file to the root of your create-react-app:

var path = require('path')
const { override, babelInclude } = require('customize-cra')

module.exports = function (config, env) {
  return Object.assign(
    config,
    override(
      babelInclude([
        /* transpile (converting to es5) code in src/ and shared component library */
        path.resolve('src'),
        path.resolve('../components'),
      ])
    )(config, env)
  )
}

Then use react-app-rewired instead of react-scripts in your scripts for start and build of the project:

"scripts": {
        "start": "react-app-rewired start",
        "build-prod": "react-app-rewired build",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
},