javascript - How to export all components in index.js? - Stack Overflow

admin管理员组

文章数量:1193337

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?

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?

• javascript
• reactjs
• redux
• react-redux

Share Improve this question Follow asked Jul 4, 2020 at 3:59 Ish ThomasIsh Thomas 2,43055 gold badges3939 silver badges6363 bronze badges 2

• Note you have a trailing comma after Menu in the export – charlietfl Commented Jul 4, 2020 at 4:03
• it seems like you don't have a Menu.js in your components folder – blankart Commented Jul 4, 2020 at 4:11

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 15

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

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"

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

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.

Just remove the default it works perfectly well

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

export {
  Header,
  Menu,
};

本文标签： javascriptHow to export all components in indexjsStack Overflow