title: How to share React components in monorepo, by source?
body: <p>I have a monorepo containing 3 different React projects:</p>
  <pre><code>- SHARED_COMPONENTS
    src
      Button.tsx
    package.json
  - APP_A
    src
      main.ts
    package.json
  - APP_B
    src
      main.ts
    package.json
  </code></pre>
  <p>How can I import the Button(.tsx) module from both main.ts files? E.g. I want to define my shared components inside the SHARED_COMPONENTS folder, and use these components inside APP_A and APP_B.</p>
  <p>I do not want to compile the Button (and share it with tools like bit.dev or npm registry). I want to include the <em>source file</em> of Button.tsx, and let each individual build script (the ones for APP_A, and APP_B) compile/transpile the source of Button.tsx.</p>
  <p>In other words, Button.tsx should become part of the source code of f.e. APP_A. I do not want to include it as a compiled component.</p>
  <p>All projects (SHARED_COMPONENTS, APP_A, APP_B) are created with CRA. But if necessary the webpack config can be overridden, or we can eject and go manual.</p>
  <p>I believe the main problem is that ../SHARED_COMPONENTS lays outside of the src directory for each individual APP project, and hence we cannot include the source code from shared components.</p>
  <p>Are there solutions for this? Links to a guide or a thorough explanation would be much appreciated. I've tried searching extensively but the material I find often suggests packaging the shared components and share them with bit.dev/npm registry, which is what we don't want. We try this at the moment, and it's very cumbersome for the development cycle.</p>