配置tsconfig的baseUrl后，部分命名导出无法正常工作

问题背景 #

为了简化导入写法，我在tsconfig.json中配置了"baseUrl": "src"，项目结构如下：

|- src
   |- components
      |- someComponent
         index.tsx
   constants.ts
   types.ts

原本使用相对导入时一切正常：

import { someType } from '../../types';
import { SOME_CONSTANT } from '../../constants';

改为绝对导入后，types.ts的命名导出可以正常使用，但constants.ts的命名导出却抛出错误：

Module constants has no exported member SOME_CONSTANT

相对导入constants.ts依然正常，将constants.ts改为默认导出后，绝对导入也能正常工作：

// constants.ts
const SOME_CONSTANT = {
   value1: 'abc',
   value2: 'xyz'
}
export default SOME_CONSTANT;

// someComponent/index.tsx
import SOME_CONSTANT from 'constants';

另外尝试添加.ts后缀导入时，会抛出错误：

An import path cannot end with a '.ts' extension. Consider importing 'constants.js' instead.

附当前tsconfig.json配置：

{
  "compilerOptions": {
    "target": "es2018",
    "outDir": "./build/",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmit": true,
    "types": ["cypress", "@testing-library/cypress"],
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

可能的原因及解决方案 #

1. 文件名大小写不匹配 #

你的tsconfig.json中开启了forceConsistentCasingInFileNames: true，这会强制TypeScript严格检查导入路径和实际文件名的大小写是否一致。如果实际文件名为Constants.ts（首字母大写），但导入时用了constants（全小写），就会出现无法识别导出成员的问题。

解决方法：检查src目录下的文件名，确保constants.ts的大小写和导入语句完全一致，比如统一为全小写或首字母大写。

2. TypeScript服务缓存异常 #

编辑器的TypeScript语言服务可能存在缓存残留，导致无法识别最新的文件导出内容。

解决方法：

• 在VSCode中按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），执行TypeScript: Restart TS Server命令；
• 关闭并重新打开项目编辑器，或者删除项目中的缓存目录（如node_modules/.cache）。

3. 第三方模块冲突 #

如果项目依赖了名为constants的第三方包，Node.js的模块解析机制可能会优先加载第三方模块而非本地的constants.ts文件。

解决方法：

• 检查package.json的dependencies和devDependencies中是否存在constants包，若存在可尝试移除；
• 临时修改本地文件名（比如改为appConstants.ts），测试绝对导入是否正常，以此验证是否存在冲突。

4. IsolatedModules选项的隐性影响 #

tsconfig.json中开启了isolatedModules: true，该选项要求每个文件都必须是ES模块（即包含import/export语句）。如果constants.ts中存在隐藏的语法错误（比如未闭合的括号、非法字符等），可能导致TypeScript无法正确解析模块结构。

解决方法：

• 仔细检查constants.ts文件的语法，确保没有隐藏错误；
• 临时关闭isolatedModules选项，测试绝对导入是否恢复正常，以此排查是否是该选项导致的问题。

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