应用页面组件导出错误求助：Cannot read properties of undefined

启动项目后，开发者工具控制台出现如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'default')
    at Module.AddLesson (groupName.tsx:49:1)
    at ./src/pages/changes/components/changeElement/changeElement.tsx (changeElement.tsx:16:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/pages/changes/components/index.ts (groupName.tsx:49:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/pages/changes/changesMain.tsx (methods.ts:24:1)

使用craco配置路径别名，配置内容如下：

const path = require('path')
module.exports = {
    webpack: {
        alias: {
            '@components': path.resolve(__dirname, 'src/components'),
            '@atoms': path.resolve(__dirname, 'src/atoms'),
            '@hooks': path.resolve(__dirname, 'src/hooks'),
            '@interfaces': path.resolve(__dirname, 'src/interfaces'),
            '@pages': path.resolve(__dirname, 'src/pages'),
            '@queries': path.resolve(__dirname, 'src/queries'),
            '@': path.resolve(__dirname, 'src'),
        },
    },
}

控制台提示“No issues found.”，需排查该错误原因。

1. 模块导入导出不匹配 #

这个错误的核心是尝试读取未定义对象的default属性，大概率是导入导出方式不匹配：

• 检查groupName.tsx第49行的AddLesson导出：如果是命名导出（export const AddLesson = ...），那changeElement.tsx里不能用import AddLesson from 'xxx'，得改成import { AddLesson } from 'xxx'；如果是默认导出（export default AddLesson），则要确认导入路径是否正确。
• 核对changeElement.tsx第16行的导入路径，检查别名使用是否错误，比如把@pages/xxx写成@components/xxx这类问题。

2. 路径别名未同步TS配置（若使用TypeScript） #

仅在craco里配置webpack别名还不够，TypeScript的tsconfig.json需要同步路径映射，否则编辑器不报错但打包时会出现解析问题：
在tsconfig.json的compilerOptions中添加：

"baseUrl": "./src",
"paths": {
  "@components/*": ["components/*"],
  "@atoms/*": ["atoms/*"],
  "@hooks/*": ["hooks/*"],
  "@interfaces/*": ["interfaces/*"],
  "@pages/*": ["pages/*"],
  "@queries/*": ["queries/*"],
  "@/*": ["*"]
}

3. 缓存或热重载异常 #

webpack热缓存可能导致模块解析出错，试试这些操作：

• 删除node_modules/.cache文件夹
• 删除build文件夹后重新执行npm start
• 打开开发者工具，勾选Disable cache后刷新页面

4. 模块文件本身存在异常 #

检查groupName.tsx第49行附近的代码，确认AddLesson的导出逻辑是否正常，比如是否有语法错误、导出语句前是否有未捕获的报错导致模块加载失败。

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