Next.js运行pnpm dev出现模块大小写差异错误求助

在使用pnpm搭建Next.js 14.2.5基础项目时，每次运行pnpm dev都会触发模块大小写冲突警告，已尝试删除node_modules和.next重新安装依赖，问题未解决。

错误信息 #

⚠ ./node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/is-error.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|D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\build\webpack\loaders\next-flight-client-module-loader.js!D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[16].oneOf[5].use[1]!D:\NextJs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\lib\is-error.js|app-pages-browser
    Used by 2 module(s), i. e.
    javascript/auto|D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\build\webpack\loaders\next-flight-client-module-loader.js!D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[16].oneOf[5].use[1]!D:\NextJs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\client\components\is-hydration-error.js|app-pages-browser
* javascript/auto|D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\build\webpack\loaders\next-flight-client-module-loader.js!D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[16].oneOf[5].use[1]!D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\lib\is-error.js|app-pages-browser
    Used by 2 module(s), i. e.
    javascript/auto|D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\loader.js!D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\build\webpack\loaders\next-flight-client-module-loader.js!D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[16].oneOf[5].use[1]!D:\nextjs\tutorial\leerobagain\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\client\components\is-hydration-error.js|app-pages-browser
Import trace for requested module:
./node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/lib/is-error.js
./node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/is-hydration-error.js
./node_modules/.pnpm/next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/client/components/react-dev-overlay/internal/helpers/use-error-handler.js
./node_modules/.pnpm/next@14.2.5_react-

项目配置 #

package.json #

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.2.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

layout.js #

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

page.js #

export default function Page() {
  return <h1>Hello World</h1>;
}

问题根源 #

错误信息显示路径中同时存在D:\nextjs\...和D:\NextJs\...，Windows文件系统默认不区分大小写，但Webpack模块解析时严格区分，导致同一模块被以不同大小写路径加载，触发冲突警告。

解决步骤 #

1. 统一文件夹大小写
   • 将项目所在的NextJs文件夹重命名为全小写的nextjs。Windows图形界面直接重命名可能无效，需用命令行执行：

     ren D:\NextJs D:\nextjs
     

2. 彻底清理缓存与依赖
   • 删除node_modules、.next和pnpm-lock.yaml，重新安装依赖：

     rm -rf node_modules .next pnpm-lock.yaml
     pnpm install
     

3. 启动开发服务
   • 运行pnpm dev，警告应该会消失。

注意事项 #

Windows环境下创建项目或操作文件时，尽量保持路径大小写一致，避免此类问题重复出现。Webpack、Node.js等工具的模块解析逻辑是区分大小写的，即使系统本身不区分。

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