使用npx create-react-app创建TypeScript React项目后编译失败的解决

这三个错误本质都是项目初始化不完整导致的：

• 前两个Module not found错误：src目录下缺失默认生成的App.tsx和reportWebVitals.ts文件，或者文件路径/命名有误（比如扩展名写成.js而非.tsx/.ts）。
• 第三个ESLint错误：typescript依赖未成功安装，导致@typescript-eslint/parser无法正常加载——因为TypeScript模板的ESLint配置依赖TypeScript本身。

这类问题通常出现在项目创建过程中网络不稳定、npm缓存异常，或是创建命令执行被中断，导致依赖下载不全、模板文件未完全生成。

步骤1：清理现有依赖并重新安装 #

1. 进入项目根目录（比如执行cd my-app）
2. 删除node_modules文件夹、package-lock.json文件
3. 执行重新安装命令：

npm install

步骤2：检查并修复src目录文件 #

如果重新安装后仍有文件找不到的错误，检查src目录下是否存在App.tsx、reportWebVitals.ts、index.tsx这几个核心文件。若缺失，可手动创建对应文件：

手动创建App.tsx #

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

手动创建reportWebVitals.ts #

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

同时确认index.tsx中的导入路径正确：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

步骤3：手动安装TypeScript（可选） #

如果ESLint错误仍存在，手动安装TypeScript依赖：

npm install typescript --save-dev

步骤4：重新启动项目 #

执行启动命令：

npm start

内容的提问来源于stack exchange，提问作者m_jdm35