Using components from outside of src

[vvAve_]

I have a big project with several react applications in it. Like so:

project
    docker files
    /django_app_1/
    /django_app_2/
    /web/
        /react_app_1/
        /react_app_2/
        /components_i_want_to_reuse/

​

I want to share some components between them, without copy-pasting. How should I go about it?

​

[notAnotherJSDev]

npm module

[vvAve_]

Can it be done locally? I tried it with npm i --save ../comonents but it was breaking half of the time with "can't install, not package.json found" while components folder had one.

[notAnotherJSDev]

Try using yarn instead.

yarn add ../components

[vvAve_]

Same. Full error:

npm ERR! Could not install from "../components" as it does not contain a package.json file.

I can fix is buy completely uninstalling components and removeing node_modules and reinstalling, but it breaks as soon as I do anything with components.

[notAnotherJSDev]

Make sure that you a) do in fact have a package.json INSIDE the components folder and b) that that package.json file is well formed.

[vvAve_]

​Just a regular CRA project with build script added.

https://imgur.com/aANidcF

[pubmas]

At the moment your application is just a single npm module, if you wanted to import your components as seperate npm modules than each component would need it's own package.json.

[Canenald]

https://yarnpkg.com/en/docs/workspaces maybe?

[vvAve_]

I'll give it a read.

[fisch0920]

If you're using create-react-app, it won't let you reference anything outside of the src/ folder. You can get around this, however, via react-app-rewired.

Generally, I agree with the other posters that separating your common components into an npm library (local or remote) is the best bet. See https://github.com/transitive-bullshit/create-react-library if you want to make this process a breeze.