Attempted import error: './components' does not contain a default export (imported as 'App')

Question

I have the following ReactJS project structure and I'm getting the following error:

./src/index.js

Attempted import error: './components' does not contain a default export (imported as 'App').

My goal is to import components like this: import { App, Navbar } from 'components'; (notice the 'components') and not like ./components/App, ./components/App/index or so. To do that, I needed to add index.js in the components directory. I tried doing that by the following code, but I'm receiving the error above.

What's the reason? How do I solve it?

There are similar threads, but I'm already exporting it by export default App; in ./components/App/index.jsx. Maybe the reason is the .jsx extension?

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

• components/index.js

export App from './App';

• components/App/index.jsx

import React, { Fragment } from 'react';
import './style.css';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import NotAuthorizedRoute from '../../common/NotAuthorizedRoute';
import { Navbar, Home, User, Login } from 'components';

const App = () => {
  return (
    <Fragment>
      <Router>
        <Navbar />

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/users" component={User} />
          <NotAuthorizedRoute path="/sign-in" component={Login} />
          <Redirect from="*" to="/" />
        </Switch>

      </Router>
    </Fragment>
  );
};

export default App;

• components/App/style.css

What I tried:

I tried doing the following, like people said in this thread: Attempted import error: 'App' is not exported from './App'.

• components/index.js

export { App } from './App'; // note the brackets

But then I got:

./src/components/index.js
Attempted import error: 'App' is not exported from './App'.

Answer 1

It seems you are having some confusions with ES6 export/import syntaxes. MDN documentation is very explicative, I would recommend you to check it.

The most important thing is to remember the difference between default and named export/import. (HINT: When you see brackets in export/import statements you are dealing with named ones)

In your specific case, you will have to do as follows:

• ./components/component-a.jsx

const ComponentA = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentA};

• ./components/component-b.jsx

const ComponentB = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentB};

• ./components/index.js

import {componentA} from './component-a.jsx';
import {componentB} from './component-b.jsx';

export {componentA, componentB};

• ./some-file.jsx

import {componentA, componentB} from './components';

• ./some-other-file.jsx

import {componentA} from './components';

This is the typical pattern to create a virtual export/import namespace for logical module classification.

Please note that I've not used default exports. There are several opinions about this, but I would recommend to not use them to avoid errors like the one you are having.

Please also note that you'll always have to specify the full relative path to the components directory. The only way to import things from 'components' is by having a components package installed in your node_modules directory.