Why does every component require a package.json?

[aakash-stockpile]

Hello!

Thank you for all your work with this project. I am trying to understand it more thoroughly. Why does every React component require it's own folder and package.json?

[benjaminkimble]

I could be totally mistaken, but my guess would be to avoid versioning control issues. Any dependency changes for a component might break other components, so giving each component its own separate package.json makes it much easier to manage.

[ersel-ionova]

I am curious to hear the reason behind this as well. From core devs @xidedix @mrholek

[bobbrady]

Each component has a package.json for convenience. The import statement for the component only has to specify the directory instead of the directory and the component file.

So instead of this in Full.js:
import Header from '../../components/Header/Header';

You can do this:
import Header from '../../components/Header';

The package.json file includes a main key:value pair that points the import to which file should be loaded by default. The version tracking might be helpful, but I don't see developers as keeping these values up-to-date. Might be better to just keep a separate component repo and tag it with version.

Without the package.json, one would would either name the component file index.js or use the above "double name" import.

[raunaqss]

Pardon me, I've come to this thread to ask a question regarding this particular way of structuring and importing components.

When I try and structure my components with a separate package.json file with the "main" property referencing the path to the component's file, I always get a syntax error from babel-loader refusing to recognise JSX.

However, when I replace the component file name within its folder as index.js and remove the package.json file, I can import the component using the shorthand as described above without any syntax errors whatsoever.

Any idea why this happens and what I can do to avoid using multiple index.jss even if they're in different folders, I'd prefer having multiple package.json files referencing the main file, but just can't get it to work.

Thanks in advance!

[gerasimoff]

Pardon me, I've come to this thread to ask a question regarding this particular way of structuring and importing components.

When I try and structure my components with a separate package.json file with the "main" property referencing the path to the component's file, I always get a syntax error from babel-loader refusing to recognise JSX.

However, when I replace the component file name within its folder as index.js and remove the package.json file, I can import the component using the shorthand as described above without any syntax errors whatsoever.

Any idea why this happens and what I can do to avoid using multiple index.jss even if they're in different folders, I'd prefer having multiple package.json files referencing the main file, but just can't get it to work.

Thanks in advance!

I am also interested why it is happening

[woothu]

Package.json files have been removed in v3 version of the template