Module not found: Error: Can't resolve './App' from React 18 w/TypeScript

Question

尝试升级到 React 18 时出现此错误。

不知是否与我的文件类型有关？我使用的是打字稿，所以我假设应用程序和索引都必须以 .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'

我的文件是：

index.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 />);

App.tsx

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

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

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

Answer 1

可能问题出在您的 webpack 中，因为您正在使用 Typescript。在你的 webpack 中尝试添加 ts 和 tsx

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

Answer 2

尝试将此添加到您的 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",
  ]
}

Module not found: Error: Can't resolve './App' from React 18 w/TypeScript

Module not found: Error: Can't resolve './App' from React 18 w/TypeScript

javascript

typescript

reactjs

create-react-app

react-18