reactjs - Ugyldig brug af store og små bogstaver i Windows-drevbogstav med Yarn og NextJS


Jeg opsatte et nyt projekt ved hjælp af Yarn og NextJS på min Windows-maskine i dag. Ved opstart får jeg en fejl om, at bogstavtypen er "ugyldig" for min projektmappe. Specifikt ser jeg følgende fejl:

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

Det, der er det sjove, er, at i fejlmeddelelsen er de to stier identiske bortset fra drevbogstavet.

Hvordan fikser jeg dette?

Versioner

  • Yarn version 1.22.17
  • NextJS version 12.1.5

Konsoloutput

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

Svar #1

Du har sandsynligvis ændret bogstavet på drevet i Windows i kommandoterminalen ved at bruge en kommando som cd c:\super-amazing-project og derefter oprettet et projekt med et lille Windows-drevbogstav. Dette forårsager mærkelige problemer som dem, du oplever.

Løsning 1. Skift bogstavet på drevet og prøv yarn dev igen

Du kan ændre bogstavet på drevet i Windows ved at bruge cd-kommandoen sådan her

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

c:\>cd super-amazing-project

c:\super-amazing-project> yarn dev

Løsning 2. Opsæt dit projekt igen ved at bruge det standard store bogstav for drevet

Installation med det ikke-standardiserede småbogstavs-drevbogstav på Windows kan have placeret dit nye projekt i en dårlig tilstand. Hvis dette projekt er nyt, kan det være nemmere bare at køre npx create-next-app igen og kopiere dine projektfiler.