Support Lerna monorepos

[fazouane-marouane]

Hello,

A quick search for "monorepo" in the issues will show an increasing demand for it, especially since the release of create-react-app v2 ( #1333 ). We've had the need to allow usage of JSX, ESnext and TypeScript in all our codebase (a lerna monorepo) and just import those packages without build step into our react apps. We have a few react apps in our monorepo and they need to share components and helpers, data layer etc.

What we did until now is having a build step for every single package but today we'd like to eliminate this step and just use raw sources without the build step.

This PullRequest will provide support for simple projects as well as monorepos using lerna v2 and v3 (I didn't check older versions). The idea is simple:

1. Look at the current app as will Lerna do
2. Get all local dependencies (dependencies of the current react app that is present in the monorepo)
3. Treat code from there as code in /src

Do you have any questions or suggestions regarding this?
Marouane

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[eduardomoroni]

@fazouane-marouane your solution looks interesting, I had an issue that I think it'll be solved by that.
#4517

My problem is that I'm sharing code between projects, without Lerna, I have the following folder structure

|_core
|_web (uses core)
|_mobile (uses core)

All of them are using flow, but when I import something from the core project on the web project, the CRA doesn't understand the flow types on the external module. Do you think your PR will solve this issue?

Thanks.

Currently, I'm having a two-step build, in which I transpile the core project to strip the "flow syntax". This is kind odd though.

[fazouane-marouane]

Hello @eduardomoroni,

Yes it would totally work without lerna... as long as you have a lerna.json file at the top of your workspace 😅so something like the following should work without using lerna:

{
  "lerna": "2.8.0",
  "packages": ["_core", "_web", "_mobile"],
  "npmClient": "yarn",
  "version": "0.0.0",
  "npmClientArgs": ["--ignore-engines"]
}

Since this PR is being ghosted, I don't know if supporting only yarn workspaces instead would improve its visibility. But it would pretty much help the few (?) of us that need decent support of mono repos with create-react-app.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[fazouane-marouane]

I’ll need this to stay open thanks

[eduardomoroni]

@iansu @Timer @gaearon @amyrlam @mrmckeb @ianschmitz @petetnt @bugzpodder

Any feedback on this issue?
Thanks :)

[fazouane-marouane]

FYI, I pushed it to npm https://www.npmjs.com/package/lerna-react-scripts I'll try keeping it up to date until some kind of minimal support lands in react-scripts.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[CodingDive]

Hey @iansu, any thoughts on this? #1333 has been open for 2.5 years and I would love to know if this PR will get merged into official CRA or if we should be using @fazouane-marouane fork or https://github.com/react-workspaces/react-workspaces-playground instead 🙂

[CodingDive]

Hey @fazouane-marouane, thank you for all the work on the fork.

It works great for the use cases I had so far but I think I found a bug. Trying to lazy load a component from another package seems to throw an error when the path is stored inside a variable or passed down via props. If I don't store the path of my lerna package in a variable, it seems to be working fine and lazy loads the component without any problem.

const fooDependency = '@root/foo';
const LazyLoadedComponent = lazy(() => import(fooDependency));

const Comp = () => 
  (
  <Suspense fallback={<p>Loading dependency..</p>}>
     <LazyLoadedComponent />
  </Suspense>
  )

throws following error for me:

Error: Cannot find module '@root/foo'
(anonymous function)
componentLoadingFoo.js lazy groupOptions: {} namespace object:5

Let me know if you need additional information.

[fazouane-marouane]

@ReasonableDeveloper what happens if you don’t have a monorepo (using official create-react-app) and try to lazyload via variable?

[CodingDive]

In a Codesandbox it seems to be working https://codesandbox.io/s/angry-rgb-vs0g4 but I was able to reproduce the issue using the official CRA in this repository. I will also create an issue in the React repository.

[fazouane-marouane]

I thought so and it’s not a problem with react per-se. You will most likely have the same issue with vanilla js + webpack. I think that this is a limitation to how bundling works (especially with webpack). It needs a string inside the import statement in order to bundle the dynamically imported module.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[fupengl]

FYI, I pushed it to npm https://www.npmjs.com/package/lerna-react-scripts I'll try keeping it up to date until some kind of minimal support lands in react-scripts.

You can use customize-cra react-app-rewired cra-override-workspaces to support lerna or yarn workspaces.

[fazouane-marouane]

It has been 2 years since I opened this PR without receiving any kind of review. Plus, I personally moved away from monorepos and create-react-app. So it's very hard to maintain it.
All in all, I think it's best that I close this PR.