How to setup React Monorepo (Lerna, CRA, Typescript, Craco, Yarn Workspaces)

[@rehan5383]

You made my day dear! Hats off to you.... i almost done from this issue at my job but just reached to ur tutorial and in 5 minute my problem solved.

[@TuomoKankaanpaa]

Cheers, great to hear!

[@BulatKhayrullin]

Saved my life bro with babel-loader fix in craco

[@TuomoKankaanpaa]

Great to hear!

[@vibekdutta6539]

The best monorepo video on the internet, hands down!!! Thanks a lot

[@TuomoKankaanpaa]

Thank you!🙏

[@ioannisdeliakos9885]

Craco did the trick! You're a life saver!

[@TuomoKankaanpaa]

Great!

[@GiovanniDamico-y2k]

Thanks Mr. Tuomo. Best tutorial on the web for this

[@TuomoKankaanpaa]

Thank you! I’m glad to hear that!

[@tienchuan1992]

It really is a great comprehensive explanation in detail. helps me a lot.

[@TuomoKankaanpaa]

Glad to hear that!

[@charlesmaddock2492]

Thank you so much, excellent video! Much love from Sweden

[@TuomoKankaanpaa]

Cheers!

[@MrNateSpilman]

Thank you so much!! I've been chasing the wrong leads all morning

[@TuomoKankaanpaa]

Glad to hear that I could help!

[@NguyenNguyen-sw7hq]

Exactly what I need right now! Thank you!

[@TuomoKankaanpaa]

Cheers!

[@JoseTrezza]

Thanks man, this video has just saved my life!

[@TuomoKankaanpaa]

Thanks for the comment, glad to hear! 😊🙌

[@sametmutevelli]

Awesome tutorial! How would we deploy this parent Lerna application?

[@TuomoKankaanpaa]

I would deploy the "child" applications seperately . In this case the common packages would not even have to be deployed if it just hosts all the shared components, but you could deploy the web package as you would any other React application.

[@aebmyasz]

Thanks for doing this great video man! Easy and great explained!!

[@TuomoKankaanpaa]

Cheers!

[@V0idCraftCode]

Thanks, it was a really helpful video

[@TuomoKankaanpaa]

Great to hear!

[@alekseygladun9990]

Great explanation! Thanks a lot!

[@TuomoKankaanpaa]

Cheers!

[@adeoluayangade3772]

This is an amazing explanation, I have a question, Let us assume that the common package is not a react app but a normal npm package that exposes a bunch of functions we would like to call in the web package. How would your current configuration change things?

[@minhpn2253]

Great video! Thanks

[@TuomoKankaanpaa]

Glad you liked it!

[@paraxo37]

It seems using absolute import paths inside common folder between components is not possible with this setup. Any idea how to resolve that?

[@MyNameIsYan]

From 2:45 to 2:50, you have yarn.lock file and node_modules at your root project folder, how did you get that? Tried doing the same steps before 2:45 but I don't see that in my directory

[@MyNameIsYan]

Also what yarn version are you using? Thank you!

[@AlexanderSavchenko91]

thank you! that is what I was looking for !)

[@TuomoKankaanpaa]

Great!

[@julianklumpers]

Hi, nice video. How about importing assets? let's say Button imports a svg, and you use that button in another package. It gives me an error it cannot resolve .svg

[@oscar_cornejo]

How to add the storybook?

[@TuomoKankaanpaa]

I installed it normally to one of the packages and it worked well.

[@oscar_cornejo]

@@TuomoKankaanpaa great thanks ... i will try! ✌

[@huyho4370]

Thanks for your great share, my application is using nextjs can you guide how to configure webpack?

[@huyho4370]

Step Craco configuration explained

[@cc-hc1dr]

What about production builds? Is the /common lib pulled into the production build of the /app then or do you need to publish /common? How would you handle if you had 2 different apps using different versions of common lib?

[@TuomoKankaanpaa]

The files used by app from common are included in the production build of the app. One way to handle using 2 different versions of common is to publish it to npm for example and that way you can reference them like you would any npm package.

[@cc-hc1dr]

@@TuomoKankaanpaa Thanks, I do use a private NPM repo, I'm just trying to understand how that development workflow would work. You'd need to update version, and build every time you change common, and then install latest common for the app? So I think you wouldn't have any of the advantage of seeing changes right away with the CRACO transpile?

[@TuomoKankaanpaa]

@@cc-hc1dr Yea I would say that if you use npm and you have different versions there, then you need to build common when you make changes and publish it and then update your app too, so you wouldn't get the advantage of the Craco transpile. If you use the code from the common directly and not through npm, then all you should need to do is to build your app and you are good to go. If there is someone here who knows better, feel free to correct me if I'm mistaken :)

[@Kevin-fl8rh]

고맙습니다 형님, 구독했습니다.

[@TuomoKankaanpaa]

Thanks!

[@israelsantiago7256]

Awesome! it is just exactly what I need, just a quick question... in the web/App.tsx when importing the Button, the package name shows an error that says: "Cannot find module '@tuomo/common' or its corresponding type declarations." any idea?

[@TuomoKankaanpaa]

Is it showing that error in VS Code and is the app still working or is that error blocking the app from working?

[@jayashriborse8783]

Thank you very much!

[@TuomoKankaanpaa]

Cheers!

[@riccardogrossano7099]

Hi Tuomo. I'm continuing to study Yarn. I saw in your video that you're using the classic version of Yarn (or 1.x) and not Berry version (now 3.x). Is there a particular reason?

[@TuomoKankaanpaa]

Hi and thanks for the question! There is no particular reason, I just haven't updated it and now that you mentioned that it is already in version 3.x I am actually going to look into updating it!

[@riccardogrossano7099]

Thank you! I have a question. I tried to install material-ui in the "common" package to use as a base for my graphics components. But when I import the component on the web it gives me an error. Do you have the solution for this problem?

[@TuomoKankaanpaa]

It's hard to say without knowing more about the error. If you are using the material ui components in your custom components inside common and then importing your custom components in the web package, there shouldn't be any problem with that. But if you are directly importing the material ui components then you should just install material ui to your web package.

[@riccardogrossano7099]

@@TuomoKankaanpaa Thanks for the reply. The error: " Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app [...] ". I created a button from the material-ui button. If I create it from the html "button" tag everything works fine. I also tried to use other external libraries and they all give me the same error. Is it possible that the problem is npm (I didn't use yarn)?

[@TuomoKankaanpaa]

@@riccardogrossano7099 The reason could very well be that you didn't use yarn, so I would recommend using it instead of npm. If that doesn't help, here is a good article on solving that error you got: reactjs.org/warnings/invalid-hook-call-warning.html If anything from there doesn't help, this issue has more discussion about the problem: github.com/facebook/react/issues/13991

[@riccardogrossano7099]

​@@TuomoKankaanpaa I had already found it but it didn't solve the problem - I'll be using yarn ;)

[@riccardogrossano7099]

Ok i tried with yarn and works fine. The problem is npm 👍

[@TheOnlyGodInTheWorld]

node_modules on every package?

[@TuomoKankaanpaa]

Yea there is node_modules on every package but if there is common dependencies between packages, they are placed inside the root node_modules so there is no duplication.

[@TheOnlyGodInTheWorld]

@@TuomoKankaanpaa make sense! thanks

[@georgesava1]

Does auto import work in this setup?

[@TuomoKankaanpaa]

I'm not sure, would have to test that out. Let me know if you find out before I do!

[@petarkolev6928]

Do you guys have issues using PRIMEREACT in the monorepo? PRIMEREACT class names aren't applying. Sometimes they work for an hour and after that they stop for good which is super super strange.

[@TuomoKankaanpaa]

I don’t have experience about that unfortunately

[@sabobin]

Thanks for this, this is literally the exact problem I've been struggling with for two days. I wonder though if there is some way to achieve it without craco?

[@TuomoKankaanpaa]

Great to hear that the video helped! I don't know about that, I found using Craco the best way when I was implementing this myself, but if you find another way be sure to let me know too! :)

[@sabobin]

Yeah this is great I'm just curious if there is some way to do it without adding another dependency. I noticed turborepo seems to be able to handle this scenario without craco (no idea how). Thanks again.

[@rogerprz]

Could you do a video using webpack instead of craco?

[@TuomoKankaanpaa]

Can you elaborate a little please? :)

[@jonasboardwalker]

Hi man, I think this is a very helpful tutorial, but I have a problem: when I export compoenent from the package, VS code complains that it can not find the module. Is there a way to fix this?

[@TuomoKankaanpaa]

Thanks! Make sure you have named your packages in the package.json file properly and you run lerna bootstrap in the root level. Hope this helps!

[@akashvhotkar8617]

Thanks You

[@TuomoKankaanpaa]

Cheers!

[@rouabahoussama]

Is this monorepo ? I think you should have only one node_modules but in your case, you have multiple node_modules ( one in web, and the other in common ) . I don't think this is a good setup. Anyway thanks for the video, but I think there is a better way using Nx ( which is a real monorepo ).

[@TuomoKankaanpaa]

I’d say this is monorepo too. All the shared dependencies will be in the root level node_modules and if e.g. web uses different version of a dependency than common, then the specific versions will be placed inside each package’s node_modules