React原JS项目新增TS文件后.ts模块无法导入报错怎么办

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

项目初始为纯JavaScript编写的React项目，后续自行新增.ts格式文件做TS迁移，尝试多种导入写法均无法解决上述模块找不到的报错，涉及的store.ts代码如下：

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)
        }
    }
}

按优先级从高到低逐一排查：

• 先核对文件实体：进入D:\DND\dnd1\src\services目录，确认存在AuthService文件，注意webpack对文件名大小写敏感，检查文件名是否存在大小写不匹配（比如写成authService、Authservice）、后缀是否为.ts/.tsx、文件是否放错目录层级。
• 补全webpack后缀解析配置：纯JS项目初始的webpack默认只识别.js、.jsx后缀，不会自动解析.ts文件，需要修改webpack配置的resolve.extensions字段，加入.ts、.tsx后缀：

// webpack.config.js
module.exports = {
  // 其余原有配置保持不变
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  }
}

如果是CRA创建且未eject的项目，不想修改webpack配置的话，导入时直接写全文件后缀即可：import AuthService from '../services/AuthService.ts'。

• 核对导入导出匹配关系：当前代码用的是默认导入写法，需要确认AuthService文件中用export default导出对应模块；如果AuthService是命名导出（export const AuthService = xxx），导入写法要改成import { AuthService } from '../services/AuthService'。
• 确认TS配置生效：项目根目录需要存在tsconfig.json文件，没有的话执行npx tsc --init生成，将compilerOptions.allowJs设为true兼容原有JS文件，include字段配置覆盖src目录下所有.ts、.tsx文件。
• 清理缓存重启服务：上述配置修改完成后，删除node_modules/.cache目录，重启本地开发服务，避免webpack旧缓存导致配置不生效。

内容的提问来源于stack exchange，提问作者Vladimir