reactjs - Modül bulunamadı: Hata: CRA uygulamasına typescript eklerken typescript dosyası çözümlenemiyor

Projeme typescript eklemeye ve yeni bileşenleri typescript ile yazmaya çalışıyorum. Belgeleri takip ettim ama şu hatayı aldım:
[typescript dosyası] çözülemiyor

bu durum, yeni bir create-react-app projesinde bile oluyor.
mevcut bir Create React App projesine typescript eklemek için CRA dokümantasyonuna göre, önce typescript ve tip tanım dosyalarını yüklemeliyiz:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

neredeyse bitti!
bir js/jsx dosyasının adını tsx olarak değiştirin ve geliştirme sunucunuzu yeniden başlatın!

sadelik için, Test bileşenini içeren test.tsx adlı bir typescript dosyası oluşturuyorum:

export default function Test(){
    return (
        <div>this is test to see typescirpt</div>
    )
}

ve bunu main.js'ye aktararak render etmek:

import Test from "./test";

function App() {
  return (
    <div className="App">
      <Test />
    </div>
  );
}

export default App;

Şimdi geliştirme sunucusunu yeniden başlatıyorum (öncekini CRTL+c ile kapattım) npm start ile.
Bu hatayı aldım:

Compiled with problems:

ERROR in ./src/App.js 4:0-26

Module not found: Error: Can't resolve './test' in '/home/g/w/ts/test_adding_ts/src'

Taze bir create-react-app projesi kullandım, dokümantasyonu izledim ve bu hatayı gördüm. (neden?)
bu benim kurulu bağımlılıklarım:

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.24",
    "@types/react": "^18.0.5",
    "@types/react-dom": "^18.0.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },

Cevap #1

Kök dizininizde bir yapılandırma dosyası: tsconfig.json oluşturdunuz mu? Soruda bunun bahsedildiğini görmedim.

tsconfig.json

{
  "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-jsx"
  },
  "include": [
    "src"
  ]
}

Eğer oluşturulmadıysa, package.json dosyasının bulunduğu kök dizinde bir tane oluşturabilir ve yukarıdaki yapılandırmaları yapıştırabilirsiniz. YA DA zaten oluşturulduysa, mevcut yapılandırmayı yukarıdaki yapılandırma ile değiştirebilir ve tekrar kontrol edebilirsiniz.

Cevap #2

CRA Dokümantasyon rehberi, her adımı olduğu gibi takip edersen işe yarar ama "herhangi bir dosyayı TypeScript dosyası olarak yeniden adlandır" denildiğinde çok zordur. create-react-app kaynak koduna göre TypeScript kullanmak için uygulamanızın ./tsconfig.json dosyasını içermesi gerekir.

Kılavuzda açıklandığı gibi basit yeniden adlandırma, yalnızca ./src/index.(js|ts|jsx|tsx) dosyası için çalışır, ancak tüm importlar başarısız olur çünkü create-react-app webpack'i tüm typescript dosyalarını hariç tutacak şekilde yapılandırır.

Minimal ./tsconfig.json dosyası, benim şahsen CRA sürüm 5.0.1 için kontrol ettiğim, şu şekildedir:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react"
  }
}

İlgili makaleler