2

I´m importing my components like this

import Component1 from "./components/Component1";
import Component2 from "./components/Component2";
import Component3 from "./components/Component3";
...

how can I do something like

import {Component1, Component2, Component3} from "./components/";
handsome
  • 2,335
  • 7
  • 45
  • 73
  • Does this answer your question? [ES6 exporting/importing in index file](https://stackoverflow.com/questions/34072598/es6-exporting-importing-in-index-file) – Patrick Oct 11 '20 at 19:20

1 Answers1

1

In the components folder you can create a index.js file. The index.js file is automatically loaded when importing a folder.

components/index.js

export { default as Component1 } from './Component1';
export { default as Component2 } from './Component2';
export { default as Component3 } from './Component2';

somefile.js

import { Component1, Component2, Component3 } from './components';

above has same result as this (because of file named index.js):

import { Component1, Component2, Component3 } from './components/index';
Patrick
  • 1,788
  • 4
  • 20
  • yeah that works too. was looking for maybe a webpack solution. I think is useful but it also could be confusing in cases when you have an index file like your example. – handsome Oct 11 '20 at 19:29
  • You could maybe use `alias` with [resolve](https://webpack.js.org/configuration/resolve/) however it depends on the specific use case you're trying to fix. Based on the details available in the question as far as I know there needs to be an `index.js` file. – Patrick Oct 11 '20 at 19:40