WebStorm与TypeScript在Node16模块解析绝对导入上的冲突问题

云原生阿岚

2026-7-28

Node16模块解析模式下WebStorm与Next.js的绝对导入冲突问题

为使用true-myth包，需切换至Node16模块解析模式，但该模式在WebStorm中出现异常，无论采用哪种绝对导入写法均会报错：

使用import { classNames } from "@/utils/helpers";时，WebStorm提示TS2307错误：无法找到模块'@/utils/helpers'或其对应的类型声明。
添加.ts后缀写成import { classNames } from "@/utils/helpers.ts";时，WebStorm提示TS2691错误：导入路径不能以'.ts'结尾，建议改用'@/utils/helpers.js'。
改用.js后缀后，WebStorm无报错，但项目构建/开发模式提示错误：无法解析'@/utils/helpers.js'模块。

切换回"moduleResolution": "node"模式后，所有导入错误均消失。

关键tsconfig.json配置

{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "Node16",
    "baseUrl": "./src/",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}