reactjs - การนำเข้า SVG ผ่านทาง alias ของ path ใน TypeScript (ไม่พบโมดูล)

ฉันมี create-react-app (CRA) ดังนั้นฉันจึงไม่สามารถเข้าถึง webpack.config ได้ ฉันกำลังใช้ TypeScript เพื่อสร้าง path aliases สำหรับการนำเข้าหลักที่ใช้บ่อยในแอปพลิเคชัน ทุกอย่างทำงานได้ ฉันสามารถนำเข้าทุกอย่างผ่าน path aliases แต่ไฟล์ .svg ไม่สามารถนำเข้าได้

คำถาม: ฉันสามารถนำเข้าไฟล์ .SVG ผ่านทางนามแฝงเส้นทาง @assets/images/some.svg ได้อย่างไร?

.tsconfig

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./"
  },
  "extends": "./paths.json",
  "include": [
    "src",
    "./custom.d.ts"
  ]
}

path.json

{
  "compilerOptions": {
    "paths": {
      "@pages": ["src/pages"],
      "@pages/*": ["src/pages/*"],
      "@hooks": ["src/core/hooks"],
      "@hooks/*": ["src/core/hooks/*"],
      "@components": ["src/core/components"],
      "@components/*": ["src/core/components/*"],
      "@containers": ["src/containers"],
      "@containers/*": ["src/containers/*"],
      "@services": ["src/core/services"],
      "@services/*": ["src/core/services/*"],
      "@configs": ["src/core/configs"],
      "@configs/*": ["src/core/configs/*"],
      "@assets": ["src/core/assets"],
      "@assets/*": ["src/core/assets/*"],
      "@models": ["src/core/models"],
      "@models/*": ["src/core/models/*"],
      "@store": ["src/core/store"],
      "@store/*": ["src/core/store/*"],
      "@utils": ["src/core/utils"],
      "@utils/*": ["src/core/utils/*"],
      "@styles": ["src/core/styles"],
      "@styles/*": ["src/core/styles/*"]
    }
  }
}

custom.d.ts

declare module '*.svg' {
  const content: string;
  export default content;
}

ในไฟล์ที่ฉันกำลังนำเข้า SVG ดังนี้:

import uploadStep1Logo from '@assets/images/UploadConfirmationDialog_Step1.svg';
import uploadStep2Logo from '@assets/images/UploadConfirmationDialog_Step2.svg';
import uploadStep3Logo from '@assets/images/UploadConfirmationDialog_Step3.svg';

ด้วยเหตุผลบางประการ หากฉันใช้เส้นทางสมบูรณ์ มันใช้งานได้ แต่ถ้าฉันใช้ @assets/... มันไม่สามารถระบุได้และเกิดข้อผิดพลาดดังด้านล่าง

Module not found: Can't resolve '@assets/images/UploadConfirmationDialog_Step1.svg'

คำตอบ #1

ตรวจสอบคำตอบนี้: https://stackoverflow.com/a/60598134/11047070.

แต่เพื่อให้มันทำงานได้ เวอร์ชัน react-scripts ของคุณต้องต่ำกว่า 4.0 ในตอนนี้

คำตอบ #2

คุณต้องใช้แพ็กเกจ craco และ craco-alias กับ tsconfig

https://www.npmjs.com/package/@craco/craco