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.

Akash Verma · Accepted Answer · 2018-05-03 04:49:17Z

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}

answered May 3, 2018 at 4:49

Akash Verma

3441 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

a12i · Accepted Answer · 2018-05-04 09:29:33Z

0

The problem is that you're exporting via a weird object-like syntax:

export default {
  Navigation
}

You need:

export default Navigation

Edit: pasting my comment below here with better formatting

You can only have one default export (even that's optional), but there's no limit to the total number. You can have:

// exports.js
export const a = 1
export const b = 2
export function exportTest () {}
// then a default
export default a

But - importing non-defaults happens only with the bracket syntax, let's say you want to import b which is a non-default export, you would need to use:

import { b } from 'exports' 
// or:
import { b as localName } from 'exports'

While you can import a default without the brackets and give it any name:

import whatever from 'exports'
console.log(whatever) // prints 1, as const a = 1 in exports.js

See 2ality.com/2014/09/es6-modules-final.html for more...

edited May 4, 2018 at 9:29

answered May 2, 2018 at 14:41

a12i

11 bronze badge

2 Comments

TheKarlo95 Over a year ago

What if I want to export mutliple components?

a12i Over a year ago

You can only have one default export (even that's optional), but there's no limit to the total number. You can have: ` // exports.js export const a = 1 export const b = 2 export function exportTest () {} // then a default export default a ` But - importing non-defaults happens with the bracket syntax, let's say you want to import b which is a non-default export: ` import { b } from 'exports' // while you can import a without the brackets: import whatever from 'exports' console.log(whatever) // prints 1 ` See 2ality.com/2014/09/es6-modules-final.html for more...

Collectives™ on Stack Overflow

Webpack import React component from directory

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related