Why package.json in each component folder?

[kriasoft]

Why package.json in each component folder?

[jzelenkov]

it's a convenience thing. It allows you to write a require statement for a directory instead of specific file.

without package.json:

import Layout from 'src/components/Layout/Layout.js'
// var Layout = require('src/components/Layout/Layout.js');

with package.json containing main keyword:

import Layout from 'src/components/Layout'
// var Layout = require('src/components/Layout');

Alternatively, one could rename Layout.js to index.js. Then require-statement resolution would work without package.json as well.

[koistya]

One of the use cases where package.json can be very helpful, is when you need to create an isomorphic component, having different implementations for Node.js and Browser environments:

{
  "name": "MyComponent",
  "version": "0.0.0",
  "private": true,
  "main": "./MyComponent.browser.js",
  "node": "./MyComponent.node.js"
}

[dehghani-mehdi]

When I put package.json inside component's folder, I got Support for the experimental syntax 'jsx' isn't currently enabled error, without package.json everything works perfectly, anyone knows how I can fix this?

btw I don't use any of kriasoft's kits.

[dsernst]

Interesting. Thank you

[alexesDev]

Its conflict with https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md

'react' should be listed in the project's dependencies. Run 'npm i -S react' to add it (import/no-extraneous-dependencies)

[koistya]

@alexesDev thanks for heads up! Fixed.

[krzywiecki]

@jayzelenkov I'm going to use package.json for every component in my app (so far I've been using index.js but I find package.json more natural for it) and I encounter this post. Now I'm wondering why you defined in the package.json also 3 other properties besides "main". Are you using:

"name": "Layout",
 "version": "0.0.0",
 "private": true,

these for anything?

[koistya]

@krzywiecki just to make it a valid package.json file, otherise the editor would highlight it. But, it seems like using index.js re-exporting public APIs of the component is a more widely adopted approach:

// components/Toolbar/Toolbar.js
export function Toolbar(props) { ... }

// components/Toolbar/index.js
export { Toolbar as default } from './Toolbar';

[krzywiecki]

@koistya thanks for the answer. Actually my editor is not complaining so I'll stick with "main" property only up until I find a use case for some other prop.

Yeah, it's true that index.js is commonly used for exporting public API of a component but I think it's better to use package.json for it as:

• having javascript file tend to tempt to put more things there
• way of exporting can be different (some people do export Toolbar from './Toolbar'; some export default from './Toolbar')

I want to have consistency and also force to export only one thing from a module, that's why I decide to go with package.json instead of index.js

[krzywiecki]

Yeah, that's a perfect example and I believe there might be more use cases.

[DmitryOlkhovoi]

@koistya
Hi guys, sorry for off-topic.
How I can build my project in such a way? Package.json per component in the dist folder
https://ibb.co/mR51tM9