React项目突然找不到App.tsx模块，添加后缀导入后触发createElement报错

开发者阿泽

2026-10-4

问题描述

我的应用刚才还可以正常在localhost:3000运行，现在突然出现以下报错：
Module not found: Can't resolve './App' in '/my/path/etc/...'

该报错出现在index.js文件中，文件代码如下：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import TimeAgo from "javascript-time-ago";
import { FirebaseAppProvider } from "reactfire";
import en from "javascript-time-ago/locale/en";

TimeAgo.addDefaultLocale(en);

const firebaseConfig = {
  // 我的Firebase配置
};

ReactDOM.render(
  <React.StrictMode>
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <App />
    </FirebaseAppProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// 如果你需要统计应用性能，可以传入函数记录结果
// 示例：reportWebVitals(console.log)，也可以发送到分析端点
reportWebVitals();

我的项目文件结构如下：
文件结构截图

如果我将index文件中的导入语句从
import App from "./App";
修改为
import App from "./App.tsx";
项目可以编译，但会出现新的报错：
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/App.2d194585.tsx') is not a valid name.

补充：ts配置文件内容如下：

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

问题原因

第一个找不到./App的报错，是因为项目打包工具的模块解析配置里没有将.tsx加入可省略的后缀列表，导入时不写后缀就无法识别到App.tsx文件。
第二个InvalidCharacterError报错，是因为你手动加了.tsx后缀后，项目的loader规则错误将.tsx文件识别为静态资源，导入得到的是资源的URL字符串而非React组件，渲染时字符串被当作HTML标签名，不符合规范所以报错。

解决方案

修正模块解析后缀配置
如果是自行配置的webpack，在webpack配置文件中添加如下配置：

module.exports = {
  // 其余原有配置保持不变
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  }
}

如果使用create-react-app脚手架且未eject，检查是否通过customize-cra、craco等工具修改配置时，误删除了默认的.tsx后缀配置，补回即可。

修正静态资源匹配规则
检查webpack配置的loader规则，确保处理图片、字体等静态资源的规则仅匹配对应后缀，不要包含.ts、.tsx、.js、.jsx这类代码文件后缀，示例的正确静态资源规则如下：

module.exports = {
  // 其余原有配置保持不变
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|ttf|eot)$/i,
        type: 'asset/resource',
      },
      // 其余loader规则保持不变
    ]
  }
}

可选优化：将入口文件index.js重命名为index.tsx，统一项目的代码文件格式，避免混合使用js、ts文件导致的解析异常。
配置修改完成后，删除项目下node_modules/.cache文件夹，再重新执行启动命令，清空缓存避免旧配置影响。

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