CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Ish Thomas
Ish Thomas

Reputation: 2440

How to export all components in index.js?

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?

Upvotes: 7

Views: 11687

Answers (5)

tcf01
tcf01

Reputation: 1789

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"

Upvotes: 3

Martins
Martins

Reputation: 11

Just remove the default it works perfectly well

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

export {
  Header,
  Menu,
};

Upvotes: 1

slumbergeist
slumbergeist

Reputation: 1538

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";

Upvotes: 15

Soma Holiday
Soma Holiday

Reputation: 21

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.

Upvotes: 2

blankart
blankart

Reputation: 716

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

Upvotes: 2

Related Questions