Home > OS >  Invalid casing in Windows drive letter with Yarn and NextJS
Invalid casing in Windows drive letter with Yarn and NextJS

Time:04-26

I setup a new project using Yarn and NextJS on my Windows machine today. Upon start-up, I get an error that the casing is "invalid" for my project directory. Specifically, I am seeing the following errors:

  • 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.

The kicker is that in the error message the two paths are identical except for the drive letter.

How do I fix this?

Versions

  • Yarn version 1.22.17
  • NextJS version 12.1.5

Console output

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"
  }
}

CodePudding user response:

You probably changed the case of the drive letter on Windows in the command terminal by using a command like cd c:\super-amazing-project and then setup a project with a lowercase Windows drive letter. This causes strange issues like the ones you're experiencing.

Solution 1. Change the case of the drive letter and try yarn dev again

You can change the case of the drive letter on Windows using the cd command like this

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

c:\>cd super-amazing-project

c:\super-amazing-project> yarn dev

Solution 2. Setup your project again using the default uppercase drive letter

Installing with the non-default lowercase drive letter on Windows may have placed your new project in a bad state. If this project is fresh, it may be easier to just run npx create-next-app again and copy your project files.

  • Related