CODEWITHSUNDEEP
javascriptreactjsmodulecomponentsgit-submodules
Maniraj Murugan
Maniraj Murugan

Reputation: 9084

How to import a component outside root path in react?

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

Upvotes: 2

Views: 2452

Answers (2)

Martin Seeler
Martin Seeler

Reputation: 6992

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://[email protected]:<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... />

Upvotes: 3

Namrata Sanja
Namrata Sanja

Reputation: 246

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

Upvotes: 0

Related Questions