I've prepared a simple demonstration to showcase my question: Github repository.
Within my lerna monorepo, I have two npm packages housed in the packages directory:
Utils: this package exports a function.
export const add = (a:number, b: number) => a + b
Component-library:: this package contains a basic 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 holds a tsconfig.json file with a key called paths, which specifies how imports in the form of @project/* should be mapped to the respective packages.
{
"compilerOptions": {
"jsx": "react",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"allowJs": true,
"baseUrl": ".",
"paths": {
"@project/*": ["packages/*/src"]
}
},
"exclude": ["**/build/**"]
}
Both packages contain a rollup.config.js file, each being practically identical. For the purpose of discussion here, let's focus on the configuration in the component-library package:
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'}),
]
};
As a result, both packages utilize the paths set in the root tsconfig.json and employ a plugin for transpiling TypeScript.
The component-library package imports a function named add(a,b) from @project/utils.
My objective is to build this library (using rollup) without having to build the utils package first. Essentially, I aim to construct component-library while resolving imports from utils to its source code rather than the build folder within the symlinked package located in node_modules (in other words, not utilizing the symlinks created by lerna).
I'm close to achieving this goal, but when running the build script in component-library, an error occurs:
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 ^
From what I understand, this indicates that the import resolution functions correctly, but rollup doesn't transpile the TS file retrieved from an external dependency.
How can I instruct rollup to include the file from utils in the transpilation process?