I have a React project where I'm using webpack and babel configuration created by create-react-app.

The project has a structure similar to this:

root
├── components/
│   └── Button/
│       ├── constants/
│       ├── helpers/
│       ├── Button.jsx
│       └── index.js
├── otherFolders/
├── App.js
└── package.json

where index.js always looks similar to this:

export { default } from './Button.jsx

I'm than importing these components in other parts of my application with an ordinary import statement:

import Button from 'components/Button'

I would like to omit the index.js file and make node resolve files that are named the same as their parent folder.

So for the example above it would look like this:

root
├── components/
│   └── Button/
│       ├── constants/
│       ├── helpers/
│       └── Button.jsx
├── otherFolders/
├── app.js
└── package.json

I believe that this could be solved by creating webpack or babel plugin.

So my questions are:

  • Is it necessary to write webpack or babel plugin to achieve this?
    • If yes, what exactly is responsible for resolving files and would need a custom plugin?
    • If no, what are my other options to achieve what I want?

0 Answers