Create React App配置别名遇Module not found报错求助

问题场景 #

在基于Create React App构建的非TypeScript项目中配置路径别名，WebStorm能正常识别别名路径并显示文件夹内容，但页面刷新时出现编译错误：

Module not found: Error: Can't resolve '@HomePage/HomePage' in 'C:\Users\ASUS\WebstormProjects\spnew\client\src'

已完成的操作：

• 执行了项目eject操作
• 根目录创建jsconfig.json配置IDE识别别名
• 在webpack.config.js的resolve.alias中添加了路径配置，但仍报错

当前配置详情 #

jsconfig.json（已让IDE识别正常） #

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@HomePage/*": ["./src/pages/HomePage/*"]
    }
  },
  "exclude": ["node_modules"]
}

（尝试过移除@符号、路径中的./，IDE均能识别import {...} from "@HomePage/";并显示文件夹内文件）

webpack.config.js中的alias配置（未生效） #

alias: {
        HomePage: path.resolve(__dirname, "../src/pages/HomePage"),
        'react-native': 'react-native-web',
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      }

（尝试过./、../及无前缀的路径写法）

解决方案 #

问题核心是webpack的alias配置与jsconfig.json的别名规则不匹配，且未支持通配符路径解析：

1. 修正webpack.config.js的resolve.alias #

将alias配置改为与jsconfig.json中@HomePage/*完全对应的格式，支持通配符匹配：

alias: {
        '@HomePage/*': path.resolve(__dirname, '../src/pages/HomePage/*'),
        // 保留原有配置
        'react-native': 'react-native-web',
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      }

也可以同时添加不带通配符的别名，方便直接导入文件夹下的默认导出：

alias: {
        '@HomePage': path.resolve(__dirname, '../src/pages/HomePage'),
        '@HomePage/*': path.resolve(__dirname, '../src/pages/HomePage/*'),
        // 保留原有配置
        'react-native': 'react-native-web',
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      }

2. 确认jsconfig.json配置不变 #

IDE已经能正常识别，无需修改该文件。

3. 重启开发服务 #

修改webpack配置后必须重启npm start，新配置才会生效。

4. 验证导入语法 #

确保导入路径与别名规则匹配，例如：

// 导入HomePage组件
import HomePage from '@HomePage/HomePage';

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