Monorepo with apps using different versions of React

[blordpluto]

Sorry, this is probably not the place for this, but: https://github.com/teambit/bit-dev is 404ing for me, and the "Slack" link at the bottom of the website isn't working.

Question: I am investigating setting up a monorepo that contains apps running multiple versions of multiple frameworks. As a minimal case:

workspace
├── app1 (dependencies: {react: '17'})
├── app2 (dependencies: {react: '18'})
└── myDumbComponent (dependencies: {react: '?'})

I want to share myDumbComponent between app1 and app2. Is there a way to dynamically assign the environment so that the react dependency resolves to the version of react needed for the app that the developer is currently working in? I've read through the docs, but could use some clarity on if/how Bit supports this use case, and what the best minimal approach would be. Thanks in advance for any help.

(P.S. No, I can't bump the react 17 app to react 18, for complex reasons. This is just a toy example. I'm inquiring about a broader type of problem.)

[benjgil]

Hi there

Yes this is possible, and indeed bit workspaces are built to be able to isolate all components' (including app components) dependencies. But you would need to let bit manage dependency installation via bit install.

You would just need to set the version of the react dependency for each app to the version you want, and bit (with the help of pnpm) will manage where to install the various versions of react so that they don't interfere with each other.

Then you set peerDependency of react17 || react18 on your components and you're good to go.

You can even bit run both apps simultaneously from the same workspace to test them out.

[blordpluto]

Thanks. Great to know this is at least possible. The immediate concerns I would have would be:

• how would typechecking work for the components? Would we be typechecking the components against react17 or react18 (or ideally both)?
• how would unit testing work for the components? Would we be testing the components using react17 or react18? (or ideally both)?

What would this look like in practice? How would I configure the typechecking and/or testing to select the right peerDependency version of react for a particular run?

There seems to be a wealth of commentary strongly advising against using multiple versions of a framework in a monorepo, and so we have some trepidation around this. I do realize this is beyond the scope of Bit, but you clearly have a lot of experience in the space, and I'm grateful for any guidance.

[benjgil]

As with the core react package, as long as you use the correct env (react-17 for the react17 app, react18 for react18 app), the app's env will configure the correct @types/react version for it too. So each will be type checked with the relevant version. Same for unit testing - essentially, bit really does isolate the components in terms of their dependencies, so that they're managed by their own env. All you need to do is assign the correct env to each app component and you're done.

If you're using bit to manage your components, there isnt really any sense of monorepo, polyrepo etc. With Bit each component is essentially it's own mini-repo, and the workspace is basically a management space for those mini-repos.

Lots of bit users migrated over from monorepos, with dependency management being a large (though not the only motivation for the move. I would try it out, you should be able to get something working nicely within a few hours (if you dont you can ping us on slack and we'll help tie any initial loose ends)

[benjgil]

Dependency management is a massive complication for when creating isolated code packages (components), and we've done a lot of work on perfecting it with bit (still not perfect, but light-years ahead of monorepos etc) - we even have @zkochan the creator of pnpm on our staff driving this process