ERROR in ./src/store/store.ts 4:0-50 Module not found: Error: Can't resolve '../services/AuthService' in 'D:\DND\dnd1\src\store'
webpack compiled with 1 error and 4 warnings
I tried to import in different ways. But in any case, it does not work. The most important thing is that my react was originally a js project and I added it .ts files
import {IUser} from '../models/IUser'
import {makeAutoObservable} from 'mobx'
import AuthService from '../services/AuthService';
// const AuthService = require ('../services/AuthService.ts')
export default class Store {
user = {} as IUser;
isAuth = false;
constructor(){
makeAutoObservable(this)
}
setAuth(bool: boolean){
this.isAuth = bool
}
setUser(user: IUser){
this.user = user
}
async login(email: string, password: string){
try {
const response = await AuthService.login(email, password)
localStorage.setItem('token', response.data.accessToken)
this.setUser(response.data.user)
} catch (e) {
console.log(e.response?.data?.message)
}
}
async registration(email: string, password: string, name: string, lastname: string, surname: string){
try {
const response = await AuthService.registration(email, password, name, lastname, surname)
localStorage.setItem('token', response.data.accessToken)
this.setUser(response.data.user)
} catch (e) {
console.log(e.response?.data?.message)
}
}
async logout(){
try {
const response = await AuthService.logout()
localStorage.removeItem('token')
this.setAuth(false)
this.setUser({} as IUser)
} catch (e) {
console.log(e.response?.data?.message)
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>It's difficult to pinpoint the exact problem without knowing what your webpack configuration looks like, but my guess is that you don't have a loader for TypeScript files set up. I recommend adding something like the following to your module.exports and seeing if that solves your issue:
module: {
rules:[
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src')]
}
],
resolve: {
extensions: ['.ts', '.js'],
},
},