1

I am having two react applications,

Project A

Project B

Here Project A is nothing but a simple components application and it contains the only common components.

-> src
    -> components
       -> Button

This is a very simple button component I have in the Project A.

Now the requirement is that I am in the need to use this common button component inside any other react applications.

Here in this scenario, I need to use Button component from Project A inside Project B.

For which I tried some relative import (I understand it is completely wrong) inside src/App.js file of Project B like,

import {Button} from "../../../Project A/src/components

But it gives the error as expected,

Module not found: You attempted to import ../../../Project A/src/components which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

So could anyone help me how to include the button component from Project A inside Project B ?

Note:

I cannot do copy paste of code and also strictly I need to import it from project to project only.

Also both the projects lies under a single folder like,

->Folder
  -> Project A
  -> Project B
Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116
  • For the same scenario, i would publish a package to npm and use that to different projects. Or just copy paste the component. I guess they don't deal with the same data. – Sifat Haque May 04 '21 at 05:06
  • @SifatHaque, I cannot do copy paste.. If doing so then I might not post this question itself.. But this is not something to publish in npm and use it, instead I need to import only from ```One Project``` to ```Another Project``` .. – Maniraj Murugan May 04 '21 at 05:10

2 Answers2

3

Since privacy is an issue, I would suggest developing it as a library and instead of publishing it to npm, you can just include it in your package.json with a git path. This way, you can push your lib to a private git repo and keep everything in sync.

Step 1

Create a new project (e.g. project C) with a new git repository. The setup should be like a npm package, but you will never publish it to npm. It's just for importing.

Here is a tutorial on what to da

Step 2

Move all components you want to share from project A in the shared project C. Push to you private git repo to "publish" all changes.

Step 3

Adjust the package.json from project A and project B to include the new project C, so both can use the shared components.

e.g. "package-name": "git+ssh://git@myorganisation.com:<user>/shared-project-c.git" git+ssh explained in this answer

After npm install / yarn install, you can use your components like any other library.

import {MySharedButton} from "my-shared-project-c"

<MySharedButton... />
Martin Seeler
  • 6,874
  • 3
  • 33
  • 45
  • Couldn't get your point, developing it as a library mean I should push the code of ```Project A``` to separate github repo and use that github repo inside ```Project B``` - ```package.json``` file? – Maniraj Murugan May 04 '21 at 05:21
  • You should include it in both projects. I expect you to need it in project A as well, since it is already in this project. – Martin Seeler May 04 '21 at 05:22
  • It is basically a repo with all shared components, something like you would do in a big mono repo. – Martin Seeler May 04 '21 at 05:22
  • I need to include atleast Button component (Even though I have more components like navbar, loader etc..,) from ```Project A``` inside ```Project B``` this is my requirement. – Maniraj Murugan May 04 '21 at 05:23
  • Sorry I am new to this so I have not worked in mono repos before.. – Maniraj Murugan May 04 '21 at 05:24
  • Extract all components you need in both projects to this new repo and include it in both projects. Whenever you need to include a new component in project B as well, extract it to the shared lib. This way, both projects will have these components. – Martin Seeler May 04 '21 at 05:25
  • For more info, I have a separate git repos for ```Project A``` and ```Project B``` .. – Maniraj Murugan May 04 '21 at 05:25
  • Don't worry, this is not a monorepo. I just wanted to make a comparison. – Martin Seeler May 04 '21 at 05:26
  • Martin, Could you please update the solution with steps I need to do because I am sorry that I am not getting your point exactly may be because I am new to this.. – Maniraj Murugan May 04 '21 at 05:26
  • Done, hope it helps. – Martin Seeler May 04 '21 at 05:34
  • Thanks for your help.. But creating of git repos I am having restrictions, For ```Project A``` and ```Project B``` only I have permissions.. Reason is I am going to only include ```Project A``` button component inside ```Project B``` application.. So why here need to create another repo as ```Project C``` ? I don't think my client will provide me any extra repos other than ```Project A``` and ```Porject B``` .. – Maniraj Murugan May 04 '21 at 05:37
  • But you need some kind of sharing. In a monorepo, everything would be in ONE git repo, where you have 3 sub-folders. `project A`, `project B` and `shared`. BUt since you have 2 git repos, you need a consistent way to keep them in sync. So doing relative imports won't work, since you can not expect it to work when you just clone `project A` (therefore git). So when you can not create a new git repo, you will have to make it a monorepo (all in one git repo), but then you can never check out only one project without the other one. – Martin Seeler May 04 '21 at 05:41
  • Whether you are saying to copy paste the code from ```Project A``` and ```Project B``` to ```Project C``` ? If I don't have ```Project C``` git repo then what should I need to do? Apologies if I am misunderstanding your comment because I am really not getting the point.. Still I have only this in my mind that I have two project ```Project A``` with button component and ```Project B``` to include a button component from ```Project A``` under ```App.js``` file.. This is my requirement now... – Maniraj Murugan May 04 '21 at 05:49
0

You need to create reusable component across a projects. you can create reusable component using Bit.dev

Find out from below url for more details: https://blog.bitsrc.io/6-ways-to-share-and-reuse-react-components-6d80e2fd16cd

Namrata Sanja
  • 216
  • 2
  • 1