React + TypeScript正确安装方式及模块找不到报错排查

可能的原因及对应解决方法 #

1. 文件扩展名问题 #

TypeScript项目默认配置下，webpack可能需要明确指定文件扩展名（尤其手动修改文件或项目创建异常时）。修改index.tsx中的导入语句，补充扩展名：

import App from './App.tsx';
import reportWebVitals from './reportWebVitals.ts';

2. 文件缺失或路径错误 #

检查src目录下是否存在App.tsx和reportWebVitals.ts，确保文件名拼写完全一致（注意大小写，Linux/macOS系统严格区分）。
若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;

3. 缓存或依赖安装异常 #

• 删除依赖目录和锁文件，重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 清除webpack缓存后重启服务：

  npm start -- --reset-cache
  

4. TypeScript配置问题 #

检查tsconfig.json的compilerOptions，确保包含以下关键配置：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowJs": true
  }
}

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