How to nest components?

[gustaff-weldon]

I'm fairily new to webpack (been living under Ember and ember-cli rock for many years now). First of all, thank you for that project.

I was playing with the repo and I would like to know how to support nested components. We group them by folders, often similar to what is described here https://medium.com/styled-components/component-folder-pattern-ee42df37ec68

Let's say I would like to do sth like:

└── src
    ├── CompOne
    │   ├── CompOne.css
    │   ├── CompOne.js
    │   ├── CompOne.spec.js
    │   ├── CompOne.stories.js
    │   └── index.js
    └── ui
        └── CompThree
            ├── CompThree.css
            ├── CompThree.js
            ├── CompThree.spec.js
            ├── CompThree.stories.js
            └── index.js

and then import like:

import CompThree from '@project/components/ui/CompThree;

Currently, the above will fail:

./src/App.js
Module not found: Can't resolve '@project/components/ui/CompThree' in '/Users/me/work/react-workspaces-playground/packages/apps/app-one/src'

How can this be achieved? Ideally, I would like to avoid adding reexports to index.js files.

[F1LT3R]

I think you can do this, but you would have to include the full path to the /src folder - or where ever your source lives.

So you would use something like:

import CompThree from '@project/components/src/ui/CompThree';

You could remove the src directory and place your code up one level. I'm not sure what effect this pattern will have on tree-shaking, etc. You might run into something that does not work as expected.

If you have an example repo, I might be able to see if I can configure this for you.