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)模块未找到:错误:无法解析
1条答案
按热度按时间h43kikqp1#
我们通常基于相对路径使用
import
。.
和..
的使用方式与我们在终端中更改目录时的导航方式相同:在目录树中向上移动,或
将
file
从上面的目录复制到当前目录。记住这一点,我发现您实际上可能没有使用正确的路径,关于您试图使用的模块。
请尝试将其更改为:
到
如果没有找到与模块有关的任何其他错误,请仔细检查导入路径中使用的目录结构。