Next.js+TypeScript项目导入枚举时模块解析失败求助

针对你遇到的相对/绝对路径导入枚举均失败、点语法调用成员报错的问题，按以下步骤排查解决：

1. 核对文件路径与命名准确性 #

• 相对路径：确认当前文件与src/types.ts的层级关系是否正确，比如当前文件在src/components/File/Edit.tsx，那么../../types是正确的；检查文件名拼写（比如是否写成type.ts）、大小写（Linux/macOS环境下文件名区分大小写）。
• 绝对路径：仅配置tsconfig.json的baseUrl不足以让Next.js识别别名，需要额外配置路径映射。

2. 配置Next.js与TypeScript的路径别名 #

步骤1：完善tsconfig.json配置 #

在compilerOptions中添加paths字段，明确别名映射：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "types": ["./types.ts"] // 映射"types"到src/types.ts
    },
    // ... 其他配置
  },
  "include": ["src/**/*", "next-env.d.ts"] // 确保包含src下所有文件
}

步骤2：配置Next.js的Webpack解析规则 #

在项目根目录的next.config.js中添加别名配置：

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias['types'] = path.resolve(__dirname, 'src/types');
    return config;
  },
};

3. 清除缓存并重启开发服务 #

Next.js和TypeScript的缓存可能导致解析异常，执行以下操作：

1. 关闭当前开发服务器
2. 删除项目根目录下的.next文件夹
3. 重新运行npm run dev或yarn dev

4. 排查点语法调用报错的额外情况 #

如果导入成功后仍出现点语法报错，检查：

• 当前文件是否存在与FileStatus同名的变量/类型，导致命名冲突
• 确保导入的是枚举类型而非其他值，可通过打印typeof FileStatus确认类型

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