2

I have several ReactJS projects and I am starting to have a lot of reusable components. I do not want to publish them to npm or have them mixed with the imported node_modules directory at the root of my project. Where should they go?

My projects look like this:

  • project1/
    • node_modules/
    • src/
      • index.js
      • A.jsx
  • project2/
    • node_modules/
    • src/
      • index.js
      • A.jsx

A.jsx defines a reusable component and I'm just copying the file everywhere... I would like to have it in one place only and my projects use it with import A from 'A'.

I have tried to make symlinks to A.jsx in src/ or in node_modules/ but that won't compile, like react-scripts can't handle them. How have you worked around this? Thanks for your help!

GG.
  • 21,083
  • 14
  • 84
  • 130
RaphaMex
  • 2,781
  • 1
  • 14
  • 30
  • precompile them then import the compiled versions – azium Mar 30 '18 at 20:32
  • I compiled them with the [Babel REPL](https://babeljs.io/repl/) and put it in `node_modules` but it still won't work. Can you provide an example in an answer? – RaphaMex Mar 30 '18 at 20:44
  • Actually yes, compiling works, I had other issues I fixed. But I'd like to avoid that compilation step if possible and just work with reusable `src` – RaphaMex Mar 30 '18 at 20:56
  • compilation step should be automated of course, not using the babel repl. it's as easy as adding a single line in your npm scripts using the babel cli – azium Mar 30 '18 at 21:28

1 Answers1

4

I do not want them mixed with the imported node_modules

Why not? Extracting your reusable components into their own library it's the best way to make them reusable. Once they are extracted, you can compose your projects by importing only what you need. You can also write their own tests without running the tests of an entire project. And finally you can handle different versions of the components independently of the projects.

I have tried to make symlinks to A.jsx in src/ or in node_modules/ but…

Symlinking files from one project to another one could be a good idea, but you are creating dependencies between your projects instead of creating dependencies between your projects and your components library. If you want to deploy project B that uses a component from project A, you will need to deploy both projects and recreate the symlink on the server. Also, project A is probably a bigger dependency (with its own dependencies) than a simple components library.

I do not want to publish them to npm

If you don't want to publish your components on NPM (I don't do neither), I'd still suggest you to extract your components into their own repository (GitLab has free private repositories).

Then you can install the library directly from the repository like this:

npm install git+ssh://git@git.mydomain.com:Username/Repository-name

It will create an entry in your package.json:

"Repository-name": "git+ssh://git@git.mydomain.com:Username/Repository-name"

Then you can import your reusable components:

import { ComponentA, ComponentB } from 'Repository-name'
GG.
  • 21,083
  • 14
  • 84
  • 130
  • 1
    I would add a note about compiling the react components since this will still fail for OP, since react-scripts doesn't run node_modules through local babel. – azium Mar 30 '18 at 21:32