Unexpected arrangement of the dependencies of shared dependencies

[QuentinRoy]

When a shared file has dependencies, those remain near the first use of these shared file. This is an example from a real project:

│  ├──ParticipantSetup
│  │  ├──Area
│  │  │  └──Area.module.scss
│  │  ├──ParticipantSetupForm
│  │  │  └──ConfigForm
│  │  │     ├──CheckboxWithLabel
│  │  │     │  └──CheckboxWithLabel.module.css
│  │  │     ├──FormErrorMessage
│  │  │     │  └──FormErrorMessage.module.scss
│  │  │     ├──RadioBoxGroup
│  │  │     │  └──RadioBoxGroup.module.css
│  │  │     └──ConfigForm.module.css
│  │  ├──ParticipantSetup.module.css
│  │  └──ParticipantSetupForm.js
│  ├──shared
│  │  ├──Area.js
│  │  ├──CheckboxWithLabel.js

Notice how the dependencies of Area and CheckBoxWithLabel are not quite near the file that depends on them? It makes it quite difficult to find them. Is this on purpose?

[AnatoleLucet]

Yep, this is intended.

From the doc: "the shared dependencies are always placed in a shared/ folder which is located beside the highest dependent file (or the shared parent if dependent files are nested)."

Do you have an idea of a better way to place this kind of file?

[QuentinRoy]

In this case, I believe the Area folder should be in the same directory as Area.js for example, i.e. shared. How can I know where it is otherwise? Nothing in Area.js tells me ParticipantSetup depends on it, and many other files actually depends on Area.js, but the Area folder isn’t there.

[AnatoleLucet]

Ahh yes, you're right. I misunderstood what was your issue in the first place. The Area folder should definitely be in shared beside Area.js.

[QuentinRoy]

Great! Thanks for this great project!