How to import local package in typescript monorepo

Question

and when you are packageA/foo/index.ts and you want to import packageB/index.ts you need to move two directory up import index from '../../packageB'

The question is, is there a way to import like import index from 'packageB and for nested folder import spam from 'packageB/bar/spam'?

EDIT

I have uploaded a github repo to demo the issue https://github.com/jaimesangcap/lerna-ts-monorepo

You should use Project References. See the second half of this answer, under "this is great for monorepos" — Inigo
– Inigo, Commented Apr 29, 2020 at 1:18

Dheeraj Vepakomma · Accepted Answer · 2021-06-22 11:08:58Z

You can do this by specifing the base url and (in more complicated cases) by using path mapping.

If you have a tsconfig.json in project_root, you can achieve the desired import strategy by defining

"compilerOptions": { "baseUrl": "." }

This works if the package name always corresponds with the folder name of the sub-project.

If this isn't the case, you can use paths:

"compilerOptions": { "baseUrl": ".", // This must be specified if "paths" is. "paths": { "A": ["packageA"], "B": ["packageB"], "A/*": ["packageA/*"], "B/*": ["packageB/*"] } }

This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:

resolve: { alias: { A: path.resolve(__dirname, 'packageA/'), B: path.resolve(__dirname, 'packageB/') } }

If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using ts-node -r tsconfig-paths/register packageA/index.ts (ts-node and tsconfig-paths have to be installed via npm)

thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
I'm still trying to follow along the examples of the article though.
Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via node, you can use npm link. If you update your question, I will update my answer
Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly

Collectives™ on Stack Overflow

How to import local package in typescript monorepo

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related