Importing JavaScript to TypeScript app with Lerna

Question

I try to create a monorepo with 2 React packages:

TypeScript (npx create-react-app app --template typescript)
JavaScript (ui)

I've got a basic lerna.json configuration

{
  "packages": ["packages/*"],
  "version": "1.0.0"
}

In the ui package I simply export one Button (from src/Button.jsx):

import React from 'react';

const Button = () => {
  return (
    <button>
      Start
    </button>
  )
}

export default Button;

I've bootstrapped app to use the ui package. Importing it inside the app causes the following error:

Failed to compile
/lerna-demo/packages/ui/src/Button.jsx 5:4
Module parse failed: Unexpected token (5:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const Button = () => {
|   return (
>     <button>
|       Start
|     </button>

Is there a way to add a loader to lerna or app to fix the import?

EDIT

The project structure:

lerna-demo/
  - node_modules/
  - lerna.json
  - package.json
  - packages/
    - app (created using create-react-app)
      - ...
    - ui
      - node_modules/
      - package.json
      - yarn.lock
      - src/
        - Button.jsx

The way I import the Button component:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as Button from 'ui/src/Button';

const App: React.FC = () => {

  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

@Bartek I'd check out this: https://stackoverflow.com/questions/50179670/using-react-with-lerna — Nelson Yeung, Apr 04 '20 at 15:40
@NelsonYeung it worked :) I additionally had to add `"noImplicitAny": false` to tsconfig.json — Bartek, Apr 04 '20 at 16:24

score 2 · Answer 1 · answered Apr 07 '20 at 09:16

In your tsconfig.json created by CRA you will need to tell the compiler to include also the ui pacakge so in your example its something like that:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src", "../ui/src",
  ]
}

Another option is to extend your base lerna tsconfig.json and there its already points to your package with path I guess - so from your CRA tsconfig.json just add this:

{
    "extends": "../../tsconfig.json",

and in base tsconfig.json u should define the alias name to the path: main tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "ui/*": ["./packages/ui/*"],

I have the exact same case than in the question. Adding `paths` in base tsconfig or include in the package tslint does not work. I could only see the error message changes sometimes. It seems that developers of CRA don't want you to be able to do this. An error message will appear: `The following changes are being made to your tsconfig.json file: - compilerOptions.paths must not be set (aliased imports are not supported) ` I think people have faced the same issue and looking for work-arounds. I haven't found the magic tweak so far but will come back. — Kev, Oct 28 '20 at 08:58

score 0 · Answer 2 · answered Sep 21 '21 at 15:55

I followed this answer and was able to import my separate standalone package in my lerna monorepo into my CRA typescript app by using craco and pointing the webpack config to my standalone package. I find this solution easier to manage instead of ejecting from your existing CRA config.

Given this structure:

├── package.json
├── packages
│   ├── app
│   ├── ui
└── yarn.lock

...here are the main steps:

Install craco in app/package.json:

yarn add @craco/craco

Create a craco.config.js file in the CRA project root

├── package.json
├── packages
│   ├── app
│   │   ├── src
│   │   └── craco.config.json <--- in CRA project root
│   │  
│   ├── ui
│   │   ├── src
│   
│   
└── yarn.lock

Point the webpack config to the shared module

// project/app/craco.config.js
// ---
const path = require('path');
/**
 * ALlows us to edit create-react-app configuration
 * without ejecting.
 *
 *
 */
const { getLoader, loaderByName } = require('@craco/craco');
// Replace `components` with your folder's structure.
// Again, Here I'm showcasing my current project.
const absolutePath = path.join(__dirname, '../ui');
/**
 * This is extremely important if you're using a CI/CD to build and deploy 
 * your code!!! Read!
 * 
 * If you create a package with a namespace, such as name is @schon/components, you need
 * to add what I've commented down below. Otherwise Yarn will fail in CI/CD environments!!
 */
// const uiComponents = path.join(
//   __dirname,
//   './node_modules/ui',
// );

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // https://medium.com/frontend-digest/using-create-react-app-in-a-monorepo-a4e6f25be7aa
      const { isFound, match } = getLoader(
        webpackConfig,
        loaderByName('babel-loader'),
      );
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];
        // match.loader.include = include.concat(absolutePath, uiComponents);
        match.loader.include = include.concat(absolutePath);
      }
      return {
        ...webpackConfig,
        /**
         * Optionally, other webpack configuration details.
         */
        // optimization: {
        //   splitChunks: {
        //   },
        // },
      };
    },
  },
  
};

Importing JavaScript to TypeScript app with Lerna

2 Answers2