ウェブサイト検索

reactjs - Yarn と NextJS での Windows ドライブ文字の大文字小文字の無効

今日は私のWindowsマシンで Yarn と NextJS を使って新しいプロジェクトをセットアップしました。起動時に、プロジェクトディレクトリの大文字小文字の扱いが「無効」であるというエラーが発生します。具体的には、次のようなエラーが表示されます:

  • Invalid casing detected for project dir, received c:\super-amazing-project actual path C:\super-amazing-project
  • There are multiple modules with names that only differ in casing.

問題なのは、エラーメッセージでは、2つのパスがドライブ文字以外は同じであるということです。

これをどう直せばいいですか？

バージョン

  • Yarn バージョン 1.22.17
  • NextJS バージョン 12.1.5

コンソール出力

c:\super-amazing-project>yarn dev
yarn run v1.22.17
next dev
warn  - Invalid casing detected for project dir, received c:\super-amazing-project actual path C:\super-amazing-project, see more info here https://nextjs.org/docs/messages/invalid-project-dir-casing
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

./node_modules/react/cjs/react.development.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:
* C:\super-amazing-project\node_modules\react\cjs\react.development.js
    Used by 2 module(s), i. e.
    C:\super-amazing-project\node_modules\react\index.js
* c:\super-amazing-project\node_modules\react\cjs\react.development.js
    Used by 2 module(s), i. e.
    c:\super-amazing-project\node_modules\react\index.js

package.json

{
  "name": "super-amazing-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "11",
    "@emotion/styled": "11",
    "framer-motion": "6",
    "next": "12.1.5",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-icons": "^4.3.1"
  },
  "devDependencies": {
    "@types/node": "17.0.25",
    "@types/react": "18.0.6",
    "@types/react-dom": "18.0.2",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5",
    "typescript": "4.6.3"
  }
}

回答 #1

あなたはおそらく、コマンド端末で cd c:\super-amazing-project のようなコマンドを使って、Windows のドライブ文字の大文字小文字を変更し、その後に小文字の Windows ドライブ文字でプロジェクトを設定したのでしょう。これにより、あなたが経験しているような奇妙な問題が発生します。

解決策1. ドライブ文字の大文字小文字を変更して、再度yarn devを試してください

このようにして、cd コマンドを使って Windows でドライブ文字の大文字小文字を変更できます

C:\super-amazing-project>cd c:\

c:\>cd super-amazing-project

c:\super-amazing-project> yarn dev

解決策 2. デフォルトの大文字ドライブ文字を使用してプロジェクトを再設定します

Windowsでデフォルトではない小文字のドライブ文字を使用してインストールすると、新しいプロジェクトが不正な状態になる可能性があります。このプロジェクトが新しい場合は、npx create-next-app を再度実行してプロジェクトファイルをコピーする方が簡単かもしれません。