How to get rollup to include a dependency from another package in a lerna monorepo in its transpilation (TypeScript)?

Question

I created a minimal example to show the question I have: Github repo.

I have a lerna monorepo with two npm packages in the packages folder, the packages are called:

utils: exports a function:

export const add = (a:number, b: number) => a + b

component-library:: exports one simple functional React component:

import React from 'react';
import { add } from '@project/utils';

export const MyComponent = () => <div>{add(2, 2)}</div>;

The root of the monorepo has a tsconfig.json, which defines a paths key to map any imports of the form @project/* to the packages.

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@project/*": ["packages/*/src"]
    }
  },
  "exclude": ["**/build/**"]
}

Each package has a rollup.config.js, both essentially identical (though we're only going to use the one in the component-library package here):

import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';

export default {
    input: 'src/index.tsx',
    output: {
        dir: './build',
        format: 'cjs'
    },
    plugins: [
        commonjs(),
        typescript({ tsconfig: '../../tsconfig.json'}),
    ]
};

Therefore, they both use the paths defined in the root tsconfig.json, and they use a plugin for transpiling Typescript.

component-library imports a function from @project/utils called add(a,b).

My goal is to create a build of this library (using rollup), without having to build the utils package first. In other words, I want to build component-library resolving imports from utils to the source code of utils, not the build folder in the symlinked package in node_modules (ie, not using the symlinks created by lerna).

I almost achieve this, except that when I run the build script in component-library, I get an error:

src/index.tsx → ./build... [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) ..\utils\src\index.ts (1:21) 1: export const add = (a:number, b: number) => a + b ^

The way I understand this, it means that the resolution of the import works fine, but rollup is not transpiling the TS file coming from an external dependency.

How do I tell rollup to include the file from utils in the transpilation through rollup?

Synder

Hey, did you ever figure this out? – Cavity

Similar #66784792 – Staggard

Did you fix this @evianpring? – Staggard

A small thing, but looking at your Rollup setup and comparing to mine, there's one thing missing. I put nodeResolve({ extensions, }), first, inside plugins[], above commonjs(),. The extensions is a string array like const extensions = [".js", ".json", ".node", ".ts", ".tsx"];. Try this. The import is import { nodeResolve } from "@rollup/plugin-node-resolve";. – Tillman

Answer 1

If this is really the issue

The way I understand this, it means that the resolution of the import works fine, but rollup is not transpiling the TS file coming from an external dependency.

You can run Babel from @rollup/plugin-babel and transpile ts files with Babel directly. Babel will go over files in node_modules.

Wearable

Answer 2

For a monorepo, many if not all packages will be hoisted. So get the resolving to look higher. Try using the nodeResolve option:

{
    rootDir: path.join(process.cwd(), '..')
}

Foley

Answer 3

I was able to build a working monorepo like the on you described using @rollup/plugin-node-resolve and rollup-plugin-typescript2. The component library just serves out react components which can be installed with npm. I got it working using esm as the output type and omitting the commonjs() step in plugins.

The plugins section looks something like this:

plugins: [
  resolve(),
  typescript({ tsconfig: "./tsconfig.json" }),
],

Unpack