React TypeScript项目导入App组件报模块未找到错误如何解决

报错信息 #

编译存在问题：
ERROR in ./src/index.tsx 7:0-28
Module not found: Error: Can't resolve './App' in '/Projects/test/src'

关联项目代码 #

Home 组件 #

import React from "react"

export const Home = () => {
    return (
        <>
            <div>
                <p>Essa é a pagina home</p>
            </div>
        </>
    );
};

export default Home;

App.tsx #

import React from 'react';
import { Home } from './pages/Home';

export function App() {
  return (
      <Home />
  );
};

入口文件 index.tsx #

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { App } from './App';

const ApplicationWrapper = () => {
  return (
    <App />
  );
};

ReactDOM.render(
  <React.StrictMode>
    <ApplicationWrapper />
  </React.StrictMode>,
  document.getElementById('main'),
);

项目文件结构 #

排查解决步骤 #

报错本质是构建工具在/Projects/test/src路径下找不到匹配./App的模块，按以下顺序排查即可：

• 校验文件名大小写：非Windows环境下构建工具对文件名大小写严格敏感，检查src目录下的App文件名是否完全匹配，有没有出现app.tsx、App.TSX、App.ts这类大小写、后缀错误的情况，改成标准App.tsx即可。
• 校验文件存放路径：确认App.tsx是否直接存放在src根目录，如果误放到pages等其他子文件夹，把index.tsx里的引入路径改成对应实际路径即可，比如放在pages目录就改成import { App } from './pages/App'。
• 校验构建工具后缀解析配置：如果是手动搭建的webpack项目，检查配置里的resolve.extensions字段是否包含.tsx、.ts后缀，缺省的话补上即可，参考配置：

// webpack.config.js
module.exports = {
  // 其余配置省略
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js']
  }
}

如果是用Create React App、Vite等脚手架创建的项目，直接删除node_modules文件夹后重新执行依赖安装命令，重启开发服务就能解决绝大多数缓存导致的文件识别异常。

• 校验文件实体：部分场景下编辑器缓存会导致假的文件显示，直接打开系统资源管理器进入src目录确认App.tsx是否真实存在，不存在就新建文件填入对应代码。

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