Webpack import React component from directory

Question

I have a problem. I made my project with create-react-app and I this is basically my structure:

src
├── app
│   ├── index.js
│   └── …
├── navigation
│   ├── index.js
│   └── …
└── …

My app/index.js

import App from 'app/App';

export default {
  App
};

My navigation/index.js:

import Navigation from 'navigation/Navigation';

export default {
  Navigation
};

The problem is that I can easily import from directory like:

import { App } from './app';
import { Navigation } from '.navigation';

The problem is that importing Navigation works as expected and importing App doesn't work. When I import App like above I get 'app' does not contain an export named 'App' and if I try importing it like this:

import App from './app';

I get an object like this {App: function(){}} and if I render it like <App.App /> it works as expected. Only difference is that App is class component and Navigation is function component.

Answer 1

If you have single import in your file you can use:

export default FileName

If you have multiple imports you can use:

export { FileName1, FileName2}

Incase you want to export certain file as default from multiple files exported you can use:

export {default as FileName1, FileName2}