How to export all components in index.js?

user_5522036 0
Viewed 6433

I have a trivial problem. Having this file structure, I'd like to expose all components (in index.js) so they are reachable in App.js, like that: import { Header, Menu } from "../components";. But I'm getting error that neither Home nor Menu are in the components. Here is the structure:

src/
  index.js
  app/
    App.js
    createStore.js
    reducers.js
  components/
    index.js  <--------------- In here, I'd like to export all components
    button/
      Button.js
      Button.styles.js
    header/
      Header.js
      Header.styles.js
  modules/ 
    foo/
    bar/

This is Header:

import React from "react";
import { AppBar, Toolbar, Typography } from "@material-ui/core";
import useStyles from "./Header.styles";

const Header = () => {
  const classes = useStyles();

  return (
    <AppBar position="fixed" className={classes.appBar}>
      <Toolbar>
        <Typography variant="h5">LineupFarm</Typography>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

This is components/index.js

import Header from "../components/Header/Header";
import Menu from "../components/Menu/Menu";

export default {
  Header,
  Menu,
};

... and this is my App.js:

import React from "react";
import { Route, Switch } from "react-router-dom";
import { ThemeProvider, CssBaseline, Toolbar } from "@material-ui/core";
import { Header, Menu } from "../components"; // <------------ Getting error: "Menu not found in '../components'" Why?

function App() {
  const classes = useStyles();

  return (
      <div className={classes.root}>
        <CssBaseline />
        <Header />
        <Menu />
        <main className={classes.content}>
        </main>
      </div>
  );
}

export default App;

Why am I getting error "Menu not found in '../components'"? What am I doing wrong?

react-redux redux reactjs javascript
5 Answers

In your index.js you can just directly do

export {default as Header} from "../components/Header/Header";
export {default as Menu} from "../components/Menu/Menu";

In this way we're importing the default export from the module of your choice and exporting it as a namespaced module.

Now you can import components as

import {Header, Menu} from "../components";
user_65177780

In your index.js, you have

export default {
  Header,
  Menu,
};

which is exporting a default object with the properties Header and Menu, rather exporting individual named properties.

With your current setup you could do the following in App.js:

// the name you use here is up to you, because it is a default export
import components from "../components";
const Header = components.Header;
...
<Header>

But more likely what you want is to remove the default from the export in index.js, so you can import your individual components by name.

You can read more about default vs. named exports here on MDN.

user_77678750

You can alternatively export components like this:

Your index.js:

export Menu from "../components/Menu/Menu"
export Header from '../components/Header/Header"

Then you can access all your components by importing it like this:

import * as Components from "../components"

Alternatively, you can simply write this:

import { Menu, Header} from "../components'

it is a babel plugin called @babel/plugin-proposal`export-default-from. You may refer to this link

user_138403070

Your original syntax is exposing an object outside. If you want to use it in App.js, you may take the following code as reference

//App.js
import Component from "../components";

return (
      <div className={classes.root}>
        <CssBaseline />
        <Component.Header />
        <Component.Menu />
        <main className={classes.content}>
        </main>
      </div>
  );

//

From my experience, the following code may work if you wanna use import {Header, Button} from "../components"

// in index.js
export {default as Button} from "../components/Button/Button"
export {default as Header} from "../components/Header/Header"

//in App.js
import {Button, Header} from "../components"
user_125368610

Just remove the default it works perfectly well

import Header from "../components/Header/Header";
import Menu from "../components/Menu/Menu";

export {
  Header,
  Menu,
};
user_138524940
Related