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...
For further actions, you may consider blocking this person and/or reporting abuse
blog.nrwl.io/powering-up-react-dev...
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.
Indeed, take a look at nx.dev/react/fundamentals/build-fu...
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
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:
github.com/good-idea/sane-shopify
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...
This is how I solved problem #2 github.com/stereobooster/typescrip...
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?
Hi, first thanks a ton for spending your time to test figure out stuff even writing and publish it.
Just in case you wonder, I found article react lerna with typescript here. medium.com/@sisosys7/a-monorepo-se...
probably you may had seen it, but I can run it successfully following the steps there.
Peace :)
edit : after checking here and there, the source that I put is just a minimal how react + typescript + lerna.
It does not have tests, yarn workspaces, and probably more.
I also check in your github repo for this monorepo things and i can see many progress here and there how to fix the Problems above.
Thank you for your post.
Cool article! Thanks. In turn, I have something that worth to check - webman.pro/blog/how-to-setup-types...
In the article, I covered the aliases related issues we can face with configuring Typescrit/React/Node.js/Lerna monorepo.
@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.