Функция импорта из другого файла на стороне клиента

Question

Я пытаюсь понять, почему я получаю эту ошибку:

Error: Cannot find module '../utils/auth'
Require stack:
- C:\Users\charl\Desktop\IRONHACK\Week-9\finalproject\api\routes\index.js
- C:\Users\charl\Desktop\IRONHACK\Week-9\finalproject\api\app.js
- C:\Users\charl\Desktop\IRONHACK\Week-9\finalproject\api\bin\www

Я не понимаю, почему это происходит, поскольку я экспортирую модуль getUser в auth. js и импортирую в Navbar. Кто-нибудь может взглянуть? Я пробовал // const {getUser} = require ('../ utils / auth'); но я думаю, это тоже не работает. Не знаю, где искать ...

Navbar. js

import React from "react"
import './Navbar.css';
import {Link} from "react-router-dom";
import {logout, getUser} from "../utils/auth";
// const { getUser } = require('../utils/auth'); 

class Navbar extends React.Component {
    constructor() {
        super()

        this.state = {
            
        }
    }

    handleLogout(user){
        logout(user)
    }

    handleUser(user){
        const theLoggedUser = getUser(user)
        console.log("charlesttt")
        console.log(theLoggedUser)
        console.log("charlesttt")
        return theLoggedUser.username
    }

    // handleUserImage(user){
    //     const theLoggedUser = getUser(user)
    //     return theLoggedUser.imageUrl
    // }

    // handleUserLocation(user){
    //     const theLoggedUser = getUser(user)
    //     return theLoggedUser.location
    // }

    render() {
        return (
            <nav className="navcontainer">
                <Link to="/allchallenges"><img className="logostreet" src="/images/logo.png" alt="logo" /></Link>
                <Link to="/allchallenges"><strong>All challenges</strong></Link>
                <Link to="/startchallenge"><strong>Start a challenge</strong></Link>
                <Link to="/profile"><strong>Profile settings</strong></Link>
                <Link to="/friends"><strong>Community</strong></Link>
                <Link to="/about"><strong>About</strong></Link>
                <Link to="/todo"><strong>To-do</strong></Link>
                <Link to="/" onClick={this.handleLogout}><strong>Log out</strong></Link>
                <p className="welcomemessage">{this.handleUser()} </p>
                {/* <p className="welcomemessage">Welcome {this.handleUserLocation()}</p> */}
                {/* <p className="welcomemessage">Welcome {this.handleUserImage()}</p> */}
            </nav>            
        )
    }
}

export default Navbar

авт. js

import Axios from "axios"
import qs from "qs"

//getUser
export const getUser = (user) => {
    console.log("user has been GET out of local storage (just before)")
    return JSON.parse(window.localStorage.getItem("user"))
}

Sr c имеет подпапку с компонентами, в которой есть панель навигации, а также подпапку utils с авторизацией. js

Answer 1

Ваш файл аутентификации js не имеет экспорта по умолчанию, поэтому вам следует импортировать свою функцию как:

import {getUser} from "../utils/auth"