[webpack] 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 명령 터미널이 이것을 할 수 있다는 것에 놀랐습니다.