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

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}

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

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...

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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related