(React Js)模块未找到:错误:无法解析

d5vmydt9  于 2023-06-24  发布在  React
关注(0)|答案(1)|浏览(157)

Error in ./src/pages/Login.jsx 8:0-39
未找到模块:错误:无法解析“C:\Users\Anggur\Downloads\hotellify-dicoding-capstone-main\frontend-react\src\pages”中的“../hooks/useAuth”
./src/pages/Login.jsx 9:0-50中的错误
未找到模块:错误:无法解析“C:\Users\Anggur\Downloads\hotellify-dicoding-capstone-main\frontend-react\src\pages”中的“../globals/apiEndpoint”

Login.js

import { useEffect, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';
import useAuth from '../hooks/useAuth';
import API_ENDPOINT from '../globals/apiEndpoint';
import '../index1.css';
import '../styles/global.css';
import '../styles/Form.css';
import Swal from 'sweetalert2'

const Login = () => {
  const emailInput = useRef();
  const passwordInput = useRef();
  const navigate = useNavigate();
  const { login } = useAuth();
  
  const submitHandler = async (event) => {
    event.preventDefault();
    
    const sendDataRequest = {
      email: emailInput.current.value,
      password: passwordInput.current.value,
    };
    
    try {
      const response = await axios.post(API_ENDPOINT.LOGIN, sendDataRequest);
      await Swal.fire({
        title: 'Berhasil Login',
        text: 'Berhasil login, silahkan menikmati fitur yang ada ya',
        icon: 'success',
        showConfirmButton: false,
        timer: 2000,
      });
      login(response.data);
      navigate('/');
    } catch (error) {
      const errorMessage = error?.response?.data?.message;
      Swal.fire({
        title: 'Gagal Login',
        text: `${errorMessage}`,
        icon: 'error',
      });
    }
  };
  
  return (
    <>
      <div className="container py-5">
        <div className="d-flex flex-column align-items-center justify-content-center my-5">
          <form className="col-10 col-md-6 col-lg-4 py-4" onSubmit={submitHandler}>
            <h1 className="form__title mb-5">Masuk</h1>
            <div className="row mb-3">
              <label htmlFor="emailInput" className="form-label">
                Email
                <input ref={emailInput} type="email" name="email" id="emailInput" className="form-control form__input mt-1" placeholder="Email Anda" required />
              </label>
            </div>
            <div className="row mb-3">
              <label htmlFor="passwordInput" className="form-label">
                Password
                <input ref={passwordInput} type="password" name="password" id="passwordInput" className="form-control form__input mt-1" placeholder="Masukkan Password" minLength={8} required />
                <div id="passwordHelp" className="form-text">
                  Panjang password minimal 8 karakter.
                </div>
              </label>
            </div>
            <div className="row mb-3 mt-4">
              <input type="submit" className="mx-auto btn btn-hotelify rounded-pill" value="Masuk" />
              <p className="text-center mt-3">
                Belum punya akun?
                {' '}
                <Link to="/register" className="hotelify-link pl-2">Daftar</Link>
              </p>
            </div>
          </form>
        </div>
      </div>
    </>
  );
};

export default Login;

useAuth.js

import { useContext } from 'react';
import { AuthContext } from '../store/authContext';

const useAuth = () => useContext(AuthContext);

export default useAuth;

apiEndpoint.js

import CONFIG from './config';

const API_ENDPOINT = {
  LOGIN: `${CONFIG.BASE_URL}/login`,
  CHECK_TOKEN: `${CONFIG.BASE_URL}/auth/token`,
};

export default API_ENDPOINT;

config.js

const CONFIG = {
    BASE_URL: 'http://localhost:3000/',
  };
  
  export default CONFIG;

我的人生道路有什么不对吗帮助PLS
(React Js)模块未找到:错误:无法解析

h43kikqp

h43kikqp1#

我们通常基于相对路径使用import
...的使用方式与我们在终端中更改目录时的导航方式相同:

cd ..

在目录树中向上移动,或

mv ../file .

file从上面的目录复制到当前目录。
记住这一点,我发现您实际上可能没有使用正确的路径,关于您试图使用的模块。
请尝试将其更改为:

import useAuth from '../hooks/useAuth';

import useAuth from '../../hooks/useAuth';

如果没有找到与模块有关的任何其他错误,请仔细检查导入路径中使用的目录结构。

相关问题