Create-react-app as a dependency, similar to storybook

Question

I am working on several React projects and would like to create a shared dependency that would display their React components in isolation, similar to Storybook.

I would like:

• to use create-react-app for this
• to have the app be installed as a package in all my libraries and apps (it would reside in their node_modules) that would be oblivious as to what kind of components it would receive from 'above'
• to enable CRA's webpack config to import and compile files outside of the src folder, that is- I would edit the start.js script to look for these files based on the CLI arguments received.

I've tried ejecting and changing the weback config file (removing the module scope plugin) and adding a loader that would compile files from two or three folders above, but I always get the same error:

You attempted to import ... which falls outside of the project src/ directory.

Is there an easy way to enable compiling outside of src?

Answer 1

My company has used Lerna to create a Monorepo. Our use case was almost identical to yours, if I'm understanding yours correctly.

Setting up Lerna wasn't super easy at first. We used a Yeoman generator to scaffold it, I think (but we might have ended up doing it manually in the end; I don't remember.)

I found this article talking about some of this stuff.