reactjs - ไม่สามารถหามอดูลหรือการประกาศประเภทที่เกี่ยวข้องของมัน Vite-React-Ts-SWC

ในสภาพแวดล้อมการพัฒนาของฉัน โปรเจกต์ทำงานได้อย่างสมบูรณ์ แต่เมื่อฉันพยายามปรับใช้ไปยัง vercel มันไม่สามารถสร้างและให้ข้อผิดพลาดแก่ฉันดังนี้:

src/App.tsx(9,18): ข้อผิดพลาด TS2307: ไม่สามารถหาโมดูล './pages/Home' หรือการประกาศประเภทที่สอดคล้องกันได้ src/App.tsx(11,19): ข้อผิดพลาด TS2307: ไม่สามารถหาโมดูล './pages/Login' หรือการประกาศประเภทที่สอดคล้องกันได้ src/App.tsx(13,22): ข้อผิดพลาด TS2307: ไม่สามารถหาโมดูล './pages/Archived' หรือการประกาศประเภทที่สอดคล้องกันได้

นี่คือ tsconfig.json ของฉัน:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

และไฟล์ tsconfig.node.json ของฉัน:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

ฉันลองเพิ่มพวกนี้แล้ว:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

แต่มันใช้ไม่ได้ ฉันยังได้แก้ไขไฟล์ vite.config.ts โดยเพิ่มดังนี้:

resolve: {
  alias: {
    '@pages' : '/src/pages', 
  },
},

คำตอบ #1

ปัญหานี้เกี่ยวข้องกับเส้นทางสัมบูรณ์ กรุณาตรวจสอบปัญหาอื่นและวิธีการตั้งค่าเส้นทางสัมบูรณ์

tsconfig.json

{
  "compilerOptions": {
    ...,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }

  },
  "include": ["vite.config.ts"]
}

"@/": ["./src/"] > หมายถึง "@" แทนที่ "./src/"

แต่คุณยังทำให้ Vite เข้าใจเส้นทางสัมบูรณ์ด้วย

ดังนั้น ตัวเลือกประเภทนี้จำเป็นต้องใช้ใน vite.config.json

resolve: {
  alias: {
    '@' : './src/*', 
  },
},
(It might be wrong)

คำตอบ #2

ขอบคุณสำหรับข้อมูลที่ให้มา แต่ฉันแก้ปัญหานั้นเรียบร้อยแล้วเมื่อวานนี้ สำหรับคนที่อาจเจอสถานการณ์เดียวกับที่ฉันเจอเมื่อวานนี้ สิ่งแรกคือ ต้องเข้าใจบันทึกข้อผิดพลาดอย่างแท้จริงและอ่านอย่างละเอียด ปัญหาที่ฉันพบคือ vercel สร้างโฟลเดอร์แยกชื่อ "Pages" (ตัวพิมพ์ใหญ่) ขึ้นมา ในขณะที่ฉันมีโฟลเดอร์ "pages" (ตัวพิมพ์เล็ก) ของฉันเอง และมันอ่านโฟลเดอร์ "Pages" ก่อนและไม่ได้รันเวอร์ชัน "pages" ของฉัน เพื่อตรวจสอบเรื่องนี้ vercel จะมีสำเนาของซอร์สโค้ดของคุณ วิธีแก้คือ ฉันลบโฟลเดอร์ "pages" ของฉันออกและ commit/push การเปลี่ยนแปลงก่อน เพื่อทำการ deploy ใหม่และ vercel จะบันทึกการเปลี่ยนแปลง (ก่อนอื่นคุณต้องทำสำเนาของโฟลเดอร์) จากนั้นคุณต้องนำโฟลเดอร์ที่คัดลอกไปวางที่เส้นทางที่ถูกต้องและ push การเปลี่ยนแปลงอีกครั้ง

ข้อจำกัดความรับผิดชอบ: สิ่งนี้อาจใช้ไม่ได้กับทุกคน