Importing JavaScript files with the same name as directory they're inside

Question

In my React and Webpack project, I have the following project structure of React components:

Component/
├── Component.jsx
├── index.jsx
└── styles.css

The index.jsx file simply imports and exports Component.jsx; the reason being that in files that require it, it allows the usage of the following:

import Component from '../Component'

as opposed to

import Component from '../Component/Component'

However this seems like it may be an unnecessary extra step which requires all new components to follow suit.

With this in mind, my question is: Can I have the best of both worlds? I want to be able to only have Component.jsx and styles.css in my directory, but not have to use the name twice in my import declaration.

Subcritical

import Component from './' ? – Quintillion

Answer 1

Let me suggest you the following structure I personally like:

Your component tree structure (As an example every component has a different folder structure. It is up to you to keep it clean and tidy. Index.jsx in components folder just normalizes access to those components whoever needs them):

src/components/
    Butter/
        Butter.jsx
        index.jsx
    Beets/
        Beets.jsx
    Cabbage/
        index.jsx
    Meat.jsx
index.jsx

Content of components/index.jsx

export Butter from './Butter/index.jsx';
export Beets from './Beets/Beets.jsx';
export Cabbage from './Cabbage/index.jsx';
export Meat from './Meat.jsx';

Some container Borscht.jsx somewhere else in your project which uses those components

import {
    Beets,
    Cabbage,
} from 'src/components';

Emprise

For people having issues with export X from 'Y'; syntax, I found I had to change it to export {default as X} from 'Y'; in order to get it to work, more info here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Pellerin

Answer 2

One option for webpack users is to install directory-named-webpack-plugin

Install, and then add the following to Webpack's config file:

var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");

resolve: {
    plugins: [
        new DirectoryNamedWebpackPlugin()
    ]
}

When using require("component/foo") and the path "component/foo" is resolved to a directory, Webpack will try to look for component/foo/foo.js as the entry point.

Caution: While this approach does allow webpack to resolve filenames when building and bundling, your intellisense / tooling options are a different beast altogether. Unless they also have similar functionality, you may lose Go To Definition and Intellisense support by not providing the full reference statically.

Estelaestele

Answer 3

If your folder already tells you which is the component name, you don't need to put it again in the file name inside it. I use this approach.

All modern editors already solves the trouble with two equal names (ComponentA/index.jsx and ComponentB/index.jsx) for us, by adding the folder name in the tabs.

Note that this is an Vue component, but it's the same thing for React.

Fowling