Why my ES6 import/export not working?

Question

I'm trying to import my classes in create-react-app

Working example:

export default class HeaderView extends Component {
    render() {
        return (
            <div className="header-view">
                {this.props.children}
            </div>
        );
    }
}

import HeaderView from './HeaderView'

But when i do

export class HeaderView extends Component { }

Then

import { HeaderView } from './HeaderView' is undefined

I tried different ways but none of them are working. Closest i got was

export default { HeaderView } but then

import HeaderView from './HeaderView' is Object { HeaderView:.. } and import {HeaderView} from './HeaderView' is undefined

Can you please show the folder structure + the file you import HeaderView to — Ralph, Dec 27 '16 at 15:11
Uhh.. Thanks Ralph for mentioning folder structure. I have actually index.js in my HeaderView folder, where i import/export HeaderView.js .. I guess my problem is there. — Lauri, Dec 27 '16 at 15:46

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

Your forgetting to extend react in your component, also you need to be importing react for each component:

import React from "react";
export default class HeaderView extends React.Component {
  render() {
     return (
        <div className="header-view">
            {this.props.children}
        </div>
     );
   }
 }

Then

import HeaderView from './HeaderView.js'

should work. Also note I added the file extension .js or .jsx

I believe you only import a component without a file extension when its being added as a library or external file that you installed into your environment.

import { HeaderView } from './HeaderView.js'

This is used when their are multiple components as an object inside the same file.

Check out this answer to explain the import: How to import part of object in ES6 modules

EDIT: in order to resolve imports without the extension you need to have webpack configured to look for those extensions by default.

edited May 23 '17 at 12:00

Community

1
1

answered Dec 27 '16 at 16:44

DirtyRedz

566
5
14

The OP already said that the first example "is working", so we can assume that `Component` is defined somewhere. They are wondering why using named exported doesn't work. *"I believe you only import a component without a file extension when its being added as a library or external file that you installed into your environment."* How that is handled depends on the module which the OP didn't say anything about. – Felix Kling Dec 27 '16 at 16:48
I was just checking on that and the file extension art actually has to do with if you set your environment (packages.json) to look for those extension by default. without that you need to assign the extension, sry i mean Webpack not packages,json – DirtyRedz Dec 27 '16 at 16:50
Webpack resolves `.js` by default: https://webpack.github.io/docs/configuration.html#resolve-extensions . Also, the OP might not be using webpack. – Felix Kling Dec 27 '16 at 17:04
Ah see i use .jsx. I'm assuming he was using webpack since he is using es6 which needs some kind of build process to convert using something like babel. – DirtyRedz Dec 27 '16 at 17:07
1

That's correct, but they could also be using browserify or rollup. While webpack is very popular, it's good to keep in mind that there are other tools out there :) – Felix Kling Dec 27 '16 at 17:09

score 0 · Answer 2 · answered Dec 27 '16 at 22:27

As DirtyRedz mentioned, make sure you include import React from "react"; import ReactDOM from "react-dom"

In addition, add default to your class component Ex: export default class Headerview extends React.Component {..} and when you import the component inside another file, you don't need to include the component inside {}. Good luck

Why my ES6 import/export not working?

2 Answers2