找不到模塊：錯誤：無法從帶有 TypeScript 的 React 18 解析“./App”

Question

嘗試升級到 React 18 時出現此錯誤。

我想知道這是否與我的文件類型有關？ 我正在使用 typescript 所以我假設應用程序和索引都必須以 a.tsx 結尾？

應用程序和索引文件都在同一個文件夾（src）中

ERROR in ./src/index.tsx 12:0-24

Module not found: Error: Can't resolve './App' in 'C:\Users\CleverlyDone\Documents\GitHub\myProjectName\src'

我的文件是：

索引.tsx

/** Vendor */
import React from "react";

/** Shared CSS */
import "./dist/css/index.css";

/** Entry Point */
import App from "./App";

/** Analytics */
// import reportWebVitals from "./reportWebVitals";

import { createRoot } from "react-dom/client";
const container = document.getElementById("app");
const root = createRoot(container!);
root.render(<App />);

應用程序.tsx

/** Vendor **/
import React from "react";

/** CSS */
import "./dist/css/app.css";

export default function App() {
  return (
      <div>Placeholder</div>
  );
}

Answer 1

嘗試將此添加到您的tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
  ]
}

Answer 2

可能問題出在您的webpack中，因為您使用的是Typescript 。 在您的 webpack 中嘗試添加ts和tsx

module.exports = {
    //Rest of your code
    resolve: {
        extensions: ['.ts', '.tsx'],
    },
};