How to import a file outside root directory?

Question

I am working on a simple react application where the requirement is that I need to include a submodule .

For this I have two different application,

App A :

(Consists of basic dumb components like Button)

 -> src
    -> components
       -> Button
    -> index.js

App B :

(Need to import the button that has been exported from App A )

Things I have tried:

-> Included the import statement in App B/src/App.js like,

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

But it throws the error as,

./src/App.js

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

Requirement:

-> How can I use the component (button) exported from App A inside App B ?

-> It needs to be done in this way so that I will have all the dumb components as a separate submodule and can import in whichever project needed instead of creating it for every projects..

-> So single button component can be used in multiple projects is the end result for this approach.

Strictly I cannot do copy paste work of code from App A to App B .. I am instructed only to achieve this through import..

Kindly please help me to include the component from App A to App B . I am stuck with this for long and also searched for many resources but couldn't find anything helpful. Big thanks in advance.

Note:

If it is not possible to implement this requirement, then please kindly post the reason as solution..

If there was another way of handling this then please let me know that as well.

Answer 1

I am working on a simple react application where the requirement is that I need to include a submodule .

For this I have two different application,

App A :

(Consists of basic dumb components like Button)

 -> src
    -> components
       -> Button
    -> index.js

App B :

(Need to import the button that has been exported from App A )

Things I have tried:

-> Included the import statement in App B/src/App.js like,

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

But it throws the error as,

./src/App.js

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

Requirement:

-> How can I use the component (button) exported from App A inside App B ?

-> It needs to be done in this way so that I will have all the dumb components as a separate submodule and can import in whichever project needed instead of creating it for every projects..

-> So single button component can be used in multiple projects is the end result for this approach.

Strictly I cannot do copy paste work of code from App A to App B .. I am instructed only to achieve this through import..

Kindly please help me to include the component from App A to App B . I am stuck with this for long and also searched for many resources but couldn't find anything helpful. Big thanks in advance.

Note:

If it is not possible to implement this requirement, then please kindly post the reason as solution..

If there was another way of handling this then please let me know that as well.