reactjs - واردات مطلق: React + TypeScript + Vite

مسئله

من یک برنامه ریاکت دارم که با yarn create vite ساخته شده است

من میخواستم از واردات مطلق به جای "../../.." در فایلهایم استفاده کنم، اما در برنامه React + Vite من کار نمیکند. و همه چیز در IDE به خوبی کار میکند. این واردات من را تعریف میکند و به فایلهایم هدایت میکند.

این واردات من در فایل است.

import HomePage from '@/pages/HomePage/HomePage.tsx';

اما من یک خطا دقیقاً در زمان کامپایل دارم.

[plugin:vite:import-analysis] Failed to resolve import "@/pages/HomePage/HomePage.tsx" from "src\routes\Routes.tsx". Does the file exist?

چیزی که امتحان کردم

من فایل tsconfig.json خود را پیکربندی کردم و فیلدهای "baseUrl"، "paths" و "include" را مشخص کردم.

tsconfig.json:

{
  "ts-node": {
    "files": true
  },
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist",
    "declaration": true,
    "strictNullChecks": true,
    "sourceMap": true,
    "strict": true,
    "skipLibCheck": true,
    "jsx": "react",
    "declarationDir": "types",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": true,
    "emitDeclarationOnly": true,
    "baseUrl": "src",
    "paths": {
      "@/*": [
        "*"
      ]
    }
  },
  "include": [
    "src"
  ],
  "references": [{ "path": "./tsconfig.node.json"}]
}

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), reactRefresh()],
  resolve: {
    alias: {
      '/@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    modules: {
      localsConvention: 'camelCaseOnly',
    },
  },
})

در WebStorm -> Preferences -> Editor -> Code Style -> JavaScript -> Imports من Use paths relative to the project, resource or source roots را تیک زدم.

در همین حال ESLint و WebStorm هیچ خطایی نمیدهند.

پاسخ شماره ۱

مشکل در فایل vite.config.ts بود. من یک «/» اضافی از مسیر حذف کردم و حالا درست کار میکند. از:

alias: {
  '/@': path.resolve(__dirname, 'src'),
},

به :

alias: {
  '@': path.resolve(__dirname, 'src'),
},