TypeScript monorepo for React project

stereobooster on May 25, 2019

UPD: with the help from the community some of the problems were resolved. Not all steps in What I did section are updated, but github repo contains... [Read Full]
markdown guide


While it was built for Angular, it does support React projects as well.

I'm not sure if this will solve all of the problem above, but this is worth giving a shot.


I know what you mean about it being time consuming. I think I spent much more than a half a day...

But at least for my use case, a library of npm packages in Typescript, I either solved or didn't have most of the problems you mention.

Problem 1: I did have this one and your solution (not using parallel) was what I ended up with. Not sure if there's a better solution unless Lerna came up with an api that lets you scope packages in groups (with separate concurrency settings).

Problem 2: I ended up having Webpack handle Typescript and output as UMD in each of the packages. This works, but results in bigger bundles so I want try switching to using Babel.

Problem 3: didn't have this problem, probably because of Webpack. I use Jest (with ts-jest) without having to build first, in watch mode, etc. with no issues.

Problem 4: I did get Storybook working ok, but due to some unrelated issues with data I opted to roll my own demo app. I can't remember if it had the cli vs browser issue with type errors, it might have.

One issue I do have that I haven't solved is hot module replacement. I didn't put much time into it, but wasn't able to get it working with my setup. Standard reload does work at least.

Honestly, I agree it would be nice if this could all get simpler. But I'm excited that it's possible. Aside from UI libraries it's a great way to share isomorphic code, common code between React Native and a web app, etc. Not to mention the disk space savings. For me, I see it as one of those things that's a bit rough on the edges now but will hopefully improve with time.

I would take this repo for a grain of salt, as it's my first attempt at a monorepo (and some things like name choices were done pretty hastily): github.com/unleashit/npm-library


I'm in the middle of working through some of the same problems. Here's the repo:


For problem #2: I'm using Rollup to build the packages, and it has been very painless so far. This was a helpful article: medium.com/@ali.dev/how-to-publish...


You claim to "appreciate convention over configuration" but you are trying to accomplish a very "unconventional" setup. Doesn't make sense


What is your suggestion for a more conventional approach?


You might want to take a look at Apollo monorepo setup: github.com/apollographql/apollo-se....
In particular, you can address "problem 1" by adding "composite": true and "references" to tsconfig.json in packages, so Typescript compiler will take care of building in the right order. This requires Typescript 3.0+ (typescriptlang.org/docs/handbook/p...).
Problem 2 will go away if you use different tsconfig for testing.


Yep, people already point this out github.com/stereobooster/typescrip.... All problems resolved.

Problem 2 can't be solved gracefully with different config, because we need to run build before running tests, so it will get confusing. Instead I added babel to process ES6 modules


@stereobooster thanks for this article! 👍

It helped me with a project. I created an account on dev.to solely to like your article and leave this comment!


Thanks. Yes, it took some time (more than I expected). When I initially shared the project I didn't have all the process. Community helped to figure out some questions.

To be fair it is unstable - in my current project TypeScript errors don't show up in Storybook :facepalm: (but they did before)


Great read. Where I've got the wall personally is with sass modules.

I've ended up with huge webpack bundles. That's hardly developer friendly.

code of conduct - report abuse