Next.js动态导入locales多语言文件报错显示路径异常问题咨询

报错路径与代码写法不一致的原因 #

• 别名替换早于模块存在性检查
  你在tsconfig和next.config.js中配置的@/locales路径别名，会在webpack模块解析的初始阶段就被替换为对应的物理绝对路径（比如你项目根目录下的locales文件夹路径），你源码中写的别名路径不会保留到后续的模块查找阶段，所以报错时不会显示你写的@/locales/xxx格式的路径。
• 报错时默认显示相对路径
  webpack找不到对应模块抛出错误时，会自动将解析后的绝对路径转换为当前执行导入操作的代码文件所在目录的相对路径展示，你看到的./index.en.json就是转换后的相对路径，和源码写法自然存在差异。
• 动态导入的预扫描逻辑限制
  webpack处理带变量的动态import语句时，会提前静态扫描所有符合模板规则的文件并打包，你本地没有index.en.json，扫描阶段不会收录这个文件，运行时导入自然会失败，和路径写法本身没有关系。

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