How to import multiple components from a directory in ReactJS?

Question

I have a directory with multiple react components. How can I import all components in a single line (from directory) without exporting components in separate index.js

src/
   components/
      comp1.js
      comp2.js
      comp3.js
      comp4.js

Requirement:

import {comp1, comp2, comp3, comp4} from 'src/components';

Are there any webpack/babel plugins to achieve this? Or something else? Thanks!

Shan · Accepted Answer · 2022-01-27 06:51:25Z

2

Create a index.js file in components folder.

src/
   components/
      comp1.js
      comp2.js
      comp3.js
      comp4.js
      index.js

index.js

If comp1.js contains a named export like export {Comp1} or export const Comp1 = ()=>{} export the files in index as follows

export * from './comp1.js'
export * from './comp2.js'

if comp1.js contains default export like export default Comp1 export the files in index as follows

export {default as Comp1} from './comp1.js'
export {default as Comp2} from './comp2.js'

Now You can import it as import {comp1, comp2, comp3, comp4} from '../components';

In order to import as "src/components" , you need to add alias to your webpack config

edited Jan 27, 2022 at 6:51

answered Jan 27, 2022 at 6:42

Shan

1,5684 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shiv chawla Over a year ago

I need a solution without index.js! Thanks!

shiv chawla · Accepted Answer · 2022-02-01 18:26:56Z

0

The babel-plugin-import-directory plugin elimminates the use index.js

It can be used in webpack,

module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    plugins: ['babel-plugin-import-directory']
                }
            }
        },
]}

answered Feb 1, 2022 at 18:26

shiv chawla

6081 gold badge9 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to import multiple components from a directory in ReactJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related