Webpack :“대소 문자 만 다른 이름을 가진 모듈이 여러 개 있습니다.”그러나 참조 된 모듈은 동일합니다.

webpack 3.8.1을 사용하고 있으며 다음 빌드 경고의 여러 인스턴스를 받고 있습니다.

WARNING in ./src/Components/NavBar/MainMenuItemMobile.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:
* /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/MainMenuItemMobile.js
    Used by 1 module(s), i. e.
    /Users/path/to/babel-loader/lib/index.js!/Users/path/to/NavBar/ConstructedMainMenuItems.js
* /Users/path/to/babel-loader/lib/index.js!/Users/path/to/Navbar/MainMenuItemMobile.js
    Used by 1 module(s), i. e.
    /Users/path/to/babel-loader/lib/index.js!/Users/path/to/Navbar/ConstructedMainMenuItems.js
.....
(webpack)-hot-middleware/client.js ./src/index.js

혼란스러운 점은 참조 된 '두 개의'파일이 단지 하나의 파일이라는 것입니다. 디렉토리에 대소 문자 만 다른 이름을 가진 두 개의 파일이 없습니다.

또한 내 핫 리 로더가 이러한 경고의 영향을받는 경우 파일 변경 사항을 선택하지 않는 경우가 많습니다.

이 문제의 원인은 무엇입니까?

이것은 일반적으로 사소한 오타의 결과입니다.

예를 들어 import Vue from 'vue',, import Vuex from 'vuex'.

파일을 살펴보고 사용한 위치를 확인 from 'Vue'하거나 from 'Vuex'-수입 명세서에서와 ​​똑같은 대문자 (대문자)를 사용해야합니다.

오류 설명은 더 명확하게 작성되어야하지만 내가 설명한 것은 webpack 명령에서이 오류에 대해 매번 내 문제의 원인이었습니다.

이 문제에 직면하고 있으며 운이 좋지 않은 제안 된 수정 사항을 시도한 다른 사람들을 위해 가능한 또 다른 해결책이 있습니다.

터미널에서 사용한 경로의 대소 문자가 올바른지 확인하십시오. 예를 들어 Windows에서 git bash를 사용하고 프로젝트에 다음 경로가있는 경우 :

C:\MyProjects\project-X

사용하여 액세스 cd /c/myprojects/project-x한 다음 (대문자의 부족에주의) 실행 npm start하면이 문제가 발생할 수 있습니다.

해결책은 프로젝트 경로를 대소 문자를 구분하는 것으로 간주하고 다음과 같이 사용하는 것입니다.

cd /C/MyProjects/project-X

각도 6에서 나에게 발생했습니다. IDE 또는 텍스트 편집기가 무시할 수있는 대문자 및 소문자 오용 오류입니다. 나는 사용했다

import { PayComponent }      from './payment/pay/pay.component';

대신에

import { PayComponent }      from './Payment/pay/pay.component';

"P"와 "p"만 상상해보십시오. 행운을 빕니다.

OMG 마침내 내 문제에 대한 해결책을 찾았습니다.

내가 사용하고 VS 코드 터미널을 하며 사용하던 데스크탑 대신 바탕 화면을 프롬프트의 경로에 :

C:\Users\Hans\desktop\NODE JS\mysite>

이 문제를 해결하려면 프로젝트 폴더를 닫고 다시 열어야했습니다.

File -> Close Folder
File -> Open Folder

이제 VS 코드 터미널이 올바른 프롬프트 경로를 사용하고 있습니다.

Angular 6 프로젝트에서 동일한 문제가 발생했습니다.

이 문제는 다음과 같은 모듈에서 구성 요소를 가져 오는 동안 발생했습니다.

import { ManageExamComponent } from './manage-Exam.component'; 

나는 시험이있는 관리 - 시험처럼 쓴 대문자 이해 웹팩 작은 편지 .

내가 사용하자마자

import { ManageExamComponent } from './manage-exam.component'; 

작고 문제가 해결 된 중고 시험.

이 문제 npm start는 윈도우 머신의 vscode 터미널에서 실행하려고 할 때 발생 합니다. 문제는 /desktop/flatsome대신 vscode 터미널에서 소문자가 있는 데스크탑 대신 /Desktop/flatsome대문자로 데스크탑 경로를 변경하는 것입니다.Dd

우리는 Windows에서 반응을 실행하고 개발자 중 한 명이 이것을 보았지만 다른 사람은 문제가 없었습니다.

나는 그들이 프로젝트의 하위 디렉토리에 VS Code를 여는 것을 본 다음 cd소문자로 프로젝트 디렉토리에 a 를 수행 한 다음 (실제 혼합 대소 문자 대신) npm start.

실제로 터미널에서 소문자로 된 디렉토리 이름을 볼 수 c:\someproject\somedir있지만 Windows 탐색기에서는 c:\SomeProject\SomeDir.

나는 Windows 명령 터미널이 이것을 할 수 있다는 것에 놀랐습니다.

// waring
import Test from './TestHome'
// you can rename your file with camel-case and import
import Test from './test-home'
// or you should fix the path 
import Test from '@/views/TestHome'

두 가지 방법으로 문제를 해결할 수 있기를 바랍니다.

VS Code를 사용 하고 있고 " npm run dev "를 수행하고 있지만 해당 프로젝트 폴더 가 VS Code에서 열리지 않으면 이 3 가지 경고 가 발생합니다.

따라서 해결책은 다음과 같습니다. 먼저 각 프로젝트 폴더를 연 다음 "npm run dev"만 수행합니다.

예, 동일한 이름을 사용했지만 대소 문자가 변경된 경우에 발생합니다. 예를 들어,

import React from 'React';

대신에:

import React from 'react';

next.js (React로) 링크에이 오류가있는 경우 :

import Link from 'next/Link'

대신에

import Link from 'next/link'

이 경고도 있지만 문제는 예를 들어 React 프로젝트의 파일 디렉토리가 있다는 것입니다.

**/src/containers/PageOne/index.js
**/src/containers/PageTWO/pageOneAction.js

**/src/containers/PageOne/index.js
**/src/containers/PageTWO/pageTWOAction.js

그리고 비슷한 경고가있을 것입니다. 를 action.js제외 하고 동일한 파일 이름 (예 : 해당 폴더)을 사용하지 않는 것이 좋기 때문에 index.js, 그렇지 않으면 다른 대소 문자 의미가있는 파일 시스템에서 컴파일 할 때 예기치 않은 동작이 발생할 수 있습니다.

이 경고를 해결하기 위해 다음과 같이 할 수 있습니다.

**/src/containers/PageOne/index.js
**/src/containers/PageOne/pageOneAction.js

**/src/containers/PageTWO/index.js
**/src/containers/PageTWO/pageTWOAction.js

이것은 내 경험이며 누군가를 도울 수 있기를 바랍니다.

비슷한 오류가 있었지만 다른 답변에서 설명한 것과 정확히 동일하지는 않습니다. 내 대답이 누군가를 도울 수 있기를 바랍니다.

두 가지 구성 요소 (angular 7 프로젝트)에서 파일을 가져 왔습니다.

성분 1 :

LANGUAGES = require("../../models/LANGUAGES.json");

성분 2 :

LANGUAGES = require("../../models/LANGUAGES.JSON");

이것은 어리석은 실수입니다. 여기서 문제는 동일한 파일에 서로 다른 대문자를 사용하여 두 가지 다른 요구 사항을 사용하고 있다는 것입니다 (경고를 생성했습니다).

문제를 해결하는 방법? 동일한 모델을 사용하십시오.

성분 1 :

LANGUAGES = require("../../models/LANGUAGES.json");

성분 2 :

LANGUAGES = require("../../models/LANGUAGES.json");

또는

성분 1 :

LANGUAGES = require("../../models/LANGUAGES.JSON");

성분 2 :

LANGUAGES = require("../../models/LANGUAGES.JSON");

비슷한 문제이지만 내 문제는 C:\Users\<username>\AppData\Local\Yarn. 해당 폴더를 삭제하고 원하는 글로벌 패키지를 다시 추가하면 문제가 해결되었습니다.

나는 같은 문제가 있었고 내 반응 폴더를 UI 로 명명 했으며 webpack에서 생성 된 경로가 어떻게 든 소문자로 만들어졌습니다.

그래서, 난에 이름이 UI 예에서 소문자 대신 UI 바로 내 전국 이동했다.

감사.

Visual Studio Code 및 Gitbash에서이 내용이 표시되는 경우 설정으로 이동하여 C : \ (대문자 C)를 검색하고 Gitbash.exe의 경로를 c : \로 변경하면 사라집니다.

제 경우에는 (Win7, VSCode, Angular 6) 모든 곳에서 잘못된 케이스 경로를 수정 한 후에도 문제가 지속됩니다. webpack이 어떻게 든 경로를 캐시하는 것처럼 보이므로 해결하십시오.

• 문제를 일으키는 폴더 또는 파일의 이름을 다른 것으로 변경
• 짓다
• 오류가 발생했습니다.
• 다시 이름 변경
• 짓다
• 성공

나도 같은 문제가 있었다. 실제 디렉토리는 Trade_V3 인 반면 Trade_v3 디렉토리로 이동했습니다. 디렉토리를 변경 한 후이 오류가 발생하지 않았습니다.

문자 드라이브의 경우도 중요합니다. 필자의 경우 Windows 10에는 대문자 'C'가 있고 파일에는 소문자 'c'가 있습니다.

Vue.js 에서 같은 문제에 직면 했습니다 . 결국 네임 스페이스가 다른 두 곳에서 컴포넌트를 가져온 것으로 밝혀졌습니다.

import Step1 from '~/Components/Application/Step1'

import Step1 from './Step1'

두 번째 항목을 다음으로 변경하여 수정했습니다.

import Step1 from '~/Components/Application/Step1'

여러분 중 일부에게 도움이되기를 바랍니다.

프로젝트 폴더의 이름을 "Myclass"로 변경했고 git bash에서는 어떤 이유로 "myclass"였기 때문에 동일한 문제가 발생했습니다. "m"을 낮추면 메시지가 멈췄습니다.

이 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. 무엇을했는지 :

• 문제가있는 파일을 삭제하십시오 (하지만 다른 곳에 백업하십시오!).
• Git에 변경 사항을 커밋합니다.
• 백업에서 동일한 파일을 다시 추가하십시오.
• 새 파일을 Git에 커밋 ... 문제가 해결되었습니다!

제 경우에는 가져온 모듈을 포함하는 파일 이름의 대문자를 간단히 변경했습니다. 파일 시스템 (OSX Finder, Bash) 및 코드 편집기 (VS Code)에서 소문자로 표시되었습니다. 그러나 VS 코드에서 파일을 열면 코드 편집기 탭에 이전 파일 이름이 여전히 표시됩니다. 파일을 완전히 삭제 한 다음 다시 추가해 보았습니다. 이것은 작동하지 않았습니다. 새로 추가 된 파일은 여전히 ​​편집기 탭에 이전 이름을 표시하고 내 빌드는 여전히 손상되었습니다.

그런 다음 몇 시간의 헛된 수정 시도 끝에 Git이 파일 대문자 변경을 변경으로 간주하지 않으므로 실제로 해당 파일 이름을 변경하지 않았다는 것을 발견했습니다.

Git에서 대소 문자를 구분하는 파일 이름 만 변경하려면 어떻게해야합니까?

그래서 문제가있는 파일을 삭제하고 Git에 커밋하고 다시 추가하고 다시 커밋했습니다. 경고가없고 빌드 오류가 사라졌습니다.

나는 같은 문제가 있었고 내 vue 파일이 event.vue와 같이 소문자로 명명되었다는 것을 알았습니다. 이를 해결하기 위해 이름을 Event.vue로 변경하고 가져 오는 위치를 업데이트 한 다음 작동했습니다. import 문의 경우 다음과 같습니다.

전에

import Event from '@ / components / NewsAndEvents / event'파일 이름을 바꾼 후 다음과 같이 표시되어야합니다.

'@ / components / NewsAndEvents / Event'에서 이벤트 가져 오기