When I run my react app, the console said

Failed to pile.

./src/ponents/login/index.js
Attempted import error: 'Login' is not exported from './login'.

Here is the folder structure:

├── index.js
├── login.js
└── register.js

index.js file:

export { Login } from "./login";
export { Register } from "./register";

login.js file:

import React from "react";
import ReactDOM from 'react-dom';
import loginImg from "../../login.svg";



class Login extends React.Component {
    constructor(props){
      super(props);
    }

    render() {
        return(
            // correct code
        )
    }
}


export default Login;

At first, I thought it was due to typo or sth like that, but I checked the spelling and syntax and still confused by the error. Really want to get some help!

When I run my react app, the console said

Failed to pile.

./src/ponents/login/index.js
Attempted import error: 'Login' is not exported from './login'.

Here is the folder structure:

├── index.js
├── login.js
└── register.js

index.js file:

export { Login } from "./login";
export { Register } from "./register";

login.js file:

import React from "react";
import ReactDOM from 'react-dom';
import loginImg from "../../login.svg";



class Login extends React.Component {
    constructor(props){
      super(props);
    }

    render() {
        return(
            // correct code
        )
    }
}


export default Login;

At first, I thought it was due to typo or sth like that, but I checked the spelling and syntax and still confused by the error. Really want to get some help!

• javascript
• reactjs

6 Answers 6

The problem is your Login ponent has default export. And you imported it as named export.

Your import statement must be

import Login from './login' 

import { default as Login } from './login' 

Or you should export your Login ponent as

export { Login } 

You used export default but your index.js does not import the default export. Change to:

export { default as Login } from "./login";
export { default as Register } from "./register"

When you export anything as default then you have to import it as

import Login from "./login";

not

import { Login } from "./login";

if you are exporting multiple functions or ponents you can import like

import { Login } from "./login";

But in your case you are exporting a single ponent itself. So you can import like

import Login from "./login";

since Login is the only thing that is being exported from login.js.

i think you should remove {} over your ponent. replace this:

import {Login} from "./login"

with this:

import Login from "./login"

If it happens when you use Jest to run tests, maybe this helps you:

In my case was because I started the mand "npm run test" and later created a new JS file in a new folder (data/heroes.js), and it was not finding that new file, showing this error:

Cannot find module '../data/heroes' from 'src/base/08-imp-exp.js'

But VsCode editor detected imports and exports correctly, so I restarted the terminal instance that was running the tests, and it worked !

Restart the tests terminal !