Vuex store导入navigation模块时ESLint报扩展名规则冲突原因排查

这一报错和navigation是JS/Vue保留关键字完全无关，核心是ESLint Import插件的规则配置自相矛盾、且模块解析规则未和项目实际构建逻辑对齐，才会出现“加后缀报错、不加后缀也报错”的奇怪现象。

报错逐一拆解 #

• 不带后缀导入./modules/navigation时的两个报错来源：
  1. Unable to resolve path to module（import/no-unresolved规则）：ESLint 内置的模块解析器没有同步项目实际的无扩展名解析配置（比如webpack/Vite里配置的无后缀识别js/vue文件的规则），无法定位到不带.js后缀的文件，因此判定路径不存在。
  2. Missing file extension for "./modules/navigation"：你项目中的import/extensions规则配置了「所有模块导入必须显式写文件扩展名」，因此会要求你补充后缀。
• 补充.js后缀导入后报错的来源：
  此时触发的Unexpected use of file extension "js"，本质是import/extensions规则本身存在配置冲突：规则同时设置了「JS文件的导入禁止携带.js后缀」，等于对同一段导入路径同时提出了“必须带后缀”和“不准带后缀”两个完全相反的要求，自然会持续报错。

你可能会疑惑：之前新增其他模块时明明用的一模一样的导入逻辑，为什么没出问题？
核心原因是之前的其他模块导入恰好命中了规则的例外条件：比如之前写的导入用的是别名路径（如@/store/modules/xxx）而非纯相对路径，落在规则的豁免范围内，没有暴露配置本身的矛盾。

正确修复方案 #

• 修正import/extensions规则配置，对齐日常开发习惯：
  对JS/TS类代码文件的导入设置为never（不强制要求显式写后缀），对静态资源（CSS、图片、JSON等）设置为always（强制要求显式写后缀），从根源上消除规则本身的冲突。
• 同步ESLint的模块解析器配置，让import/no-unresolved规则能识别和构建工具一致的解析逻辑（包括无后缀识别、别名路径映射），解决路径无法识别的报错。
• 排查文件本身的拼写问题：检查实际文件的路径、大小写是否和导入代码完全匹配（类Unix环境下大小写不匹配会直接导致路径解析失败）。

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