NextJS+AntDesign开发登录功能时遇模块大小写重复错误求助

使用NextJS + AntDesign开发前端，在通过AntDesign的Form组件实现简易登录功能时，控制台被大量如下错误信息刷屏：

./node_modules/antd/es/Button/style/index.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* javascript/auto|/Users/pat/Projects/backend/client/node_modules/antd/es/Button/style/index.js|sc_client
    Used by 1 module(s), i. e.
    javascript/auto|/Users/pat/Projects/backend-/client/node_modules/antd/es/Button/button.js|sc_client
* javascript/auto|/Users/pat/Projects/backend-/client/node_modules/antd/es/button/style/index.js|sc_client
    Used by 1 module(s), i. e.    javascript/auto|/Users/pat/Projects/backend-/client/node_modules/antd/es/button/button.js|sc_client

Import trace for requested module:
./node_modules/antd/es/Button/style/index.js
./node_modules/antd/es/Button/button.js
./node_modules/antd/es/Button/index.js
./src/components/navbar/navbar.tsx

移除Form组件后控制台不再报错，请问该问题的成因是什么？有什么解决办法？

问题成因 #

这是文件系统大小写敏感性差异与AntDesign内部模块引用不规范共同导致的：

• 本地文件系统（比如macOS默认APFS不区分大小写）允许路径大小写混用，但Webpack等构建工具严格区分路径大小写。
• 引入Form组件后，AntDesign内部同时触发了对Button（大写开头）和button（小写开头）两种不同大小写路径的模块引用，构建工具将其识别为两个独立模块，因此抛出冲突警告。
• 移除Form组件后，不再触发这种大小写不一致的引用，警告自然消失。

解决办法 #

• 重新安装依赖：删除node_modules文件夹、package-lock.json（或yarn.lock），执行npm install/yarn install重新安装依赖，确保依赖路径大小写统一。
• 统一导入语句大小写：排查项目中所有AntDesign组件的导入代码，比如将import { Button } from 'antd/es/Button'统一改为import { Button } from 'antd/es/button'（或保持与AntDesign内部导出的大小写一致），确保所有导入路径大小写完全匹配。
• 临时配置Webpack忽略大小写：在next.config.js中添加Webpack配置，强制忽略路径大小写（仅作临时规避，不建议长期使用）：

  module.exports = {
    webpack: (config) => {
      config.resolve.ignoreCase = true;
      return config;
    },
  };
  

• 升级AntDesign版本：部分旧版AntDesign存在内部路径大小写不统一的问题，升级到最新稳定版可直接修复该问题。

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