Webpack:“ มีโมดูลหลายตัวที่มีชื่อที่แตกต่างกันเฉพาะในปลอก” แต่โมดูลที่อ้างอิงจะเหมือนกัน


92

ฉันใช้ webpack 3.8.1 และได้รับคำเตือน build ต่อไปนี้หลายอินสแตนซ์:

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

สิ่งที่ทำให้สับสนคือไฟล์ "สอง" ที่อ้างถึงเป็นเพียงไฟล์เดียวไม่มีสองไฟล์ในไดเร็กทอรีที่ชื่อแตกต่างกันในกรณีเท่านั้น

ฉันสังเกตด้วยว่าตัวโหลดร้อนของฉันมักจะไม่รับการเปลี่ยนแปลงในไฟล์หากได้รับผลกระทบจากคำเตือนเหล่านี้

อะไรที่ทำให้เกิดปัญหานี้


ลองดูสิมันอาจช่วยแก้ปัญหาของคุณได้stackoverflow.com/questions/61054565/…
Sarthak Saklecha

คำตอบ:


159

ซึ่งมักเป็นผลมาจากการพิมพ์ผิดเล็กน้อย

ตัวอย่างเช่นถ้าคุณกำลังนำเข้าโมดูลของคุณเช่น,import Vue from 'vue'import Vuex from 'vuex'

ตรวจสอบไฟล์ของคุณและตรวจสอบว่าคุณใช้ที่ไหนfrom 'Vue'หรือfrom 'Vuex'- ตรวจสอบให้แน่ใจว่าใช้ตัวพิมพ์ใหญ่ (ตัวพิมพ์ใหญ่) เดียวกันกับในคำสั่งนำเข้าของคุณ

คำอธิบายข้อผิดพลาดควรได้รับการเขียนอย่างชัดเจนมากขึ้น แต่สิ่งที่ฉันอธิบายเป็นสาเหตุของปัญหาของฉันทุกครั้งสำหรับข้อผิดพลาดนี้ในคำสั่ง webpack


10
คุณพูดถูกมันคือชื่อพา ธ ไม่ใช่ชื่อโมดูลและนั่นคือสิ่งที่ทำให้ฉันรู้สึกแย่ ฉันมีNavBar/MainMenuItemMobile.js- 'b' ใน Navbar ควรเป็นตัวพิมพ์เล็ก
tcelferact

3
อย่างรุนแรงเพื่อนในกรณีของฉันฉันใช้ React และ trow error เมื่อฉันนำเข้า: import React, { Component } from 'React';เพื่อแก้ไขเพียงfrom 'react
rflmyk

4
ปัญหาของฉันคือในองค์ประกอบหนึ่งที่ฉันอ้างถึงcomponents/vue.jsในขณะที่อีกส่วนหนึ่งฉันกำลังอ้างอิงcomponents/Vue.js
Dennis

ความคิดเห็นของคุณ @ adc17 ช่วยให้ฉันเข้าใจผลลัพธ์ที่เป็นความลับ อ่านโซลูชันนี้ใน WebPack GitHub Wiki และไม่สามารถเข้าใจได้เนื่องจากทุกอย่างดูถูกต้อง มันน่าทึ่งมากที่ 'l' ดูเหมือน 'L' เมื่อคุณตั้งค่าข้อความไว้เล็กมาก ... ฮิฮิ
Guy Park

1
เพียงเพื่อ add-- เมื่อฉันมีข้อผิดพลาดนี้มันเป็นเพราะเส้นทางของฉันในการGitBashมีตัวพิมพ์เล็กusersที่ได้รับการคาดหวังว่าตัวพิมพ์ใหญ่Webpack Users
sleepy_daze

98

สำหรับคนอื่น ๆ ที่ประสบปัญหานี้และลองใช้วิธีแก้ไขที่แนะนำโดยไม่มีโชคนี่เป็นอีกวิธีหนึ่งที่เป็นไปได้

ตรวจสอบให้แน่ใจว่าเส้นทางที่คุณใช้ในเทอร์มินัลของคุณมีตัวพิมพ์ใหญ่ที่ถูกต้อง ตัวอย่างเช่นหากคุณใช้ git bash บน Windows และโครงการของคุณมีเส้นทางต่อไปนี้:

C:\MyProjects\project-X

หากคุณเข้าถึงโดยใช้cd /c/myprojects/project-x(สังเกตการขาดกรณีทุน) จากนั้นเรียกใช้npm startคุณอาจประสบปัญหานี้

วิธีแก้ปัญหาคือการพิจารณาเส้นทางโครงการที่คำนึงถึงตัวพิมพ์เล็กและใหญ่และใช้ดังนี้:

cd /C/MyProjects/project-X


11
นั่นคือปัญหาของฉัน ขอขอบคุณ!
user2138568

1
คุณช่วยวันของฉัน! ขอบคุณมาก!
Jeff Chen

1
ว้าว .... คุณเพิ่งช่วยฉันออกมา! ฉันใช้ Git bash บน Windows เป็นหลัก ฉันใส่ปลอกผิดเมื่อเปลี่ยนแล้วมันใช้งานได้ เป็นที่น่าสังเกตว่าปลอกที่ไม่เหมาะสมใน Powershell จะไม่ส่งผลให้เกิดข้อผิดพลาดเดียวกันดูเหมือนว่าเส้นทางจะถูกแปลงเป็นกรณีที่เหมาะสมอยู่เบื้องหลัง
Ryan Eastabrook

2
ฉันมีปัญหานี้แน่นอน อย่างไรก็ตามการติดตั้งแพ็กเกจที่แตกต่างกันในช่วงเวลาที่แตกต่างกันโดยใช้พา ธ เคสที่แตกต่างกันnode_modulesโฟลเดอร์ของฉันก็เลย ฉันลบมันอย่างสมบูรณ์รีรันnpm installและคำเตือนทั้งหมดก็หายไป
เนท

1
คุณช่วยวันของฉัน!
Hiruni Nimanthi

18

มันเกิดขึ้นกับฉันในเชิงมุม 6 มันเป็นข้อผิดพลาดในการใช้ตัวพิมพ์ใหญ่และตัวอักษรขนาดเล็กซึ่ง ide หรือโปรแกรมแก้ไขข้อความของคุณอาจเพิกเฉย ฉันใช้

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

แทน

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

ลองนึกภาพแค่ "P" และ "p" โชคดี.


1
สำหรับฉันมันเป็นdatatables.net-fixedheader(ถูกต้อง) แทนที่จะเป็นDataTables.net-fixedheader(ผิด) ใน Windows 10
Jonas Gröger

14

OMG ในที่สุดฉันก็พบวิธีแก้ปัญหาของฉัน

ฉันใช้VS Code Terminalและใช้เดสก์ท็อปแทนเดสก์ท็อปในเส้นทางของพรอมต์:

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

ในการแก้ไขฉันต้องปิดโฟลเดอร์โครงการและเปิดขึ้นมาใหม่:

File -> Close Folder
File -> Open Folder

และตอนนี้ VS Code Terminal กำลังใช้เส้นทางพร้อมต์ที่ถูกต้อง


4

ฉันมีปัญหาเดียวกันในโครงการเชิงมุม 6

ปัญหานี้เกิดขึ้นเนื่องจากในขณะที่นำเข้าส่วนประกอบในโมดูลเช่น

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

ฉันได้เขียนเช่นจัดการ-สอบที่สอบอยู่ในตัวอักษรและ webpack เข้าใจอักษรตัวเล็ก

ทันทีที่ฉันใช้

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

ใช้การสอบในขนาดเล็กและแก้ไขปัญหาได้


3

ปัญหานี้เกิดขึ้นกับฉันเมื่อฉันพยายามเรียกใช้npm startในเทอร์มินัล vscode บนเครื่องวินโดว์ และประเด็นสำคัญคือ/desktop/flatsomeแทน/Desktop/flatsomeเพียงแค่เปลี่ยนเส้นทางไปยังสก์ท็อปที่มีเงินทุนDแทนสก์ท็อปที่มีตัวพิมพ์เล็กdใน terminal vscode ของคุณ


ขอขอบคุณ!. กำลังจะบ้า
oyalhi

2

เราใช้การตอบสนองบน Windows และหนึ่งในนักพัฒนาของฉันเห็นสิ่งนี้ แต่ไม่มีใครมีปัญหา

ผมเฝ้าดูพวกเขาเปิดรหัส VS ไดเรกทอรีย่อยของโครงการแล้วได้cdไปยังไดเรกทอรีโครงการที่มีตัวพิมพ์เล็ก (แทนการผสมกรณีที่เกิดขึ้นจริง) npm startจากนั้นก็วิ่ง

จริงๆแล้วคุณจะได้เห็นชื่อไดเรกทอรีในตัวพิมพ์เล็กใน terminal เป็นc:\someproject\somedirแต่ใน Windows Explorer c:\SomeProject\SomeDirมันเป็น

ฉันแปลกใจที่เทอร์มินัลคำสั่งของ Windows อนุญาตให้คุณทำสิ่งนี้


1
เนื่องจาก ... ระบบไฟล์ windows ไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่ (เป็นเพราะใน windows 10 คุณสามารถตั้งค่าให้ตรงตามตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ได้)
Cody G

1
// 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'

หวังว่าทั้งสองวิธีจะแก้ปัญหาของคุณ。


1

หากคุณใช้VS Code & คุณกำลังทำ " npm run dev " แต่โฟลเดอร์โปรเจ็กต์นั้นไม่ได้เปิดใน VS Code คำเตือนทั้ง 3นี้จะเกิดขึ้น

วิธีแก้ปัญหาคือ: ขั้นแรกให้เปิดโฟลเดอร์โครงการที่เกี่ยวข้องจากนั้นทำเฉพาะ "npm run dev"


1

ใช่สิ่งนี้จะเกิดขึ้นหากคุณใช้ได้ใช้ชื่อเดียวกัน แต่มีการเปลี่ยนกรณีตัวอย่างเช่นคุณใช้

import React from 'React';

แทน:

import React from 'react';


0

ฉันมีคำเตือนนี้เช่นกัน แต่ปัญหาของฉันคือตัวอย่างเช่นมีไดเร็กทอรีไฟล์ของ React project:

**/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

นี่เป็นประสบการณ์ของฉันหวังว่ามันจะช่วยใครสักคนได้


0

ฉันมีข้อผิดพลาดที่คล้ายกัน แต่ไม่เหมือนกับที่อธิบายไว้ในคำตอบอื่น ๆ ฉันหวังว่าคำตอบของฉันจะช่วยใครบางคนได้

ฉันกำลังนำเข้าไฟล์ในสององค์ประกอบ (โครงการเชิงมุม 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");

0

ปัญหาที่คล้ายกัน แต่ปัญหาของฉันถูกติดตั้งในC:\Users\<username>\AppData\Local\Yarn. การลบโฟลเดอร์นั้นและเพิ่มแพ็คเกจส่วนกลางอีกครั้งฉันต้องการแก้ไขปัญหานี้


0

ฉันมีปัญหาเดียวกันฉันตั้งชื่อโฟลเดอร์ปฏิกิริยาของฉันเป็นUIและเส้นทางที่สร้างโดย webpack ก็ทำให้เป็นตัวพิมพ์เล็ก

ดังนั้นฉันจึงเปลี่ยนชื่อเป็นuiเช่นในตัวพิมพ์เล็กแทนที่จะเป็นUIซึ่งทำให้การต่อสู้ของฉันหายไปทันที

ขอบคุณ.


0

หากคุณเห็นสิ่งนี้ใน Visual Studio Code และ Gitbash ให้ไปที่การตั้งค่าและค้นหา C: \ (ตัวพิมพ์ใหญ่ C) และเปลี่ยนเส้นทางสำหรับ Gitbash.exe เป็น c: \ และจะหายไป


0

ในกรณีของฉัน (Win7, VSCode, Angular 6) ปัญหายังคงมีอยู่แม้ว่าฉันจะแก้ไขเส้นทางกรณีที่ไม่ถูกต้องทุกที่แล้วก็ตาม ดูเหมือนว่า webpack จะแคชเส้นทางดังนั้นวิธีแก้ปัญหา:

  • เปลี่ยนชื่อโฟลเดอร์หรือไฟล์ที่ทำให้เกิดปัญหาเป็นอย่างอื่น
  • สร้าง
  • มีข้อผิดพลาด
  • เปลี่ยนชื่อกลับ
  • สร้าง
  • ประสบความสำเร็จ

0

ฉันก็มีปัญหาเดียวกันเช่นกัน ฉันไปที่ไดเร็กทอรี Trade_v3 แล้วในขณะที่ไดเร็กทอรีจริงคือ Trade_V3 หลังจากเปลี่ยนไดเร็กทอรีข้อผิดพลาดนี้ไม่ได้เกิดขึ้น


0

กรณีของไดรฟ์ตัวอักษรก็มีความสำคัญเช่นกัน ในกรณีของฉัน Windows 10 มีตัวพิมพ์ใหญ่ 'C' ในขณะที่ฉันมีตัวพิมพ์เล็ก 'c' ในไฟล์


0

ผมประสบปัญหาเดียวกันในVue.js ในที่สุดปรากฎว่าฉันนำเข้าองค์ประกอบจากสองแห่งที่มีเนมสเปซต่างกัน

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

import Step1 from './Step1'

แก้ไขโดยเปลี่ยนอันที่สองเป็น:

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

หวังว่ามันจะช่วยคุณได้บ้าง ...


0

ปัญหาเดียวกันเกิดขึ้นกับฉันเพราะฉันเปลี่ยนชื่อโฟลเดอร์โครงการเป็น "Myclass" และใน git bash มันเป็น "myclass" ด้วยเหตุผลบางประการ เมื่อฉันเปลี่ยนเป็น "m" ที่ต่ำกว่าข้อความก็หยุดลง


0

วิธีแก้ปัญหาเหล่านี้ไม่ได้ผลสำหรับฉัน สิ่งที่ทำคือ:

  • ลบไฟล์ที่มีปัญหา (แต่สำรองข้อมูลไว้ที่อื่น!)
  • ยอมรับการเปลี่ยนแปลงกับ Git
  • เพิ่มไฟล์เดียวกันอีกครั้งจากข้อมูลสำรองของคุณ
  • ส่งไฟล์ใหม่ไปยัง Git ... แก้ไขปัญหาแล้ว!

ในกรณีของฉันฉันเพิ่งเปลี่ยนการใช้ตัวพิมพ์ใหญ่ของชื่อไฟล์ที่มีโมดูลที่นำเข้า แสดงเป็นตัวพิมพ์เล็กในระบบไฟล์ (OSX Finder, Bash) และในตัวแก้ไขโค้ด (VS Code) อย่างไรก็ตามการเปิดไฟล์ในโค้ด VS ยังคงแสดงชื่อไฟล์เก่าในแท็บตัวแก้ไขโค้ด ฉันพยายามลบไฟล์ทั้งหมดแล้วเพิ่มใหม่ สิ่งนี้ใช้ไม่ได้ - ไฟล์ที่เพิ่มใหม่ยังคงแสดงชื่อเก่าในแท็บตัวแก้ไขและงานสร้างของฉันก็ยังคงพังอยู่

หลังจากนั้นไม่กี่ชั่วโมงของความพยายามแก้ไขที่ไร้ประโยชน์ฉันพบว่า Git ไม่ถือว่าการเปลี่ยนแปลงตัวพิมพ์ใหญ่ของไฟล์เป็นการเปลี่ยนแปลงดังนั้นจึงไม่เคยเปลี่ยนชื่อไฟล์เหล่านั้นจริง:

ฉันจะยอมรับการเปลี่ยนแปลงชื่อไฟล์เฉพาะตัวพิมพ์เล็กและใหญ่ใน Git ได้อย่างไร

ดังนั้นฉันจึงลบไฟล์ที่มีปัญหามุ่งมั่นกับ Git เพิ่มอีกครั้งและยืนยันอีกครั้ง - และมันก็ใช้งานได้ ไม่มีคำเตือนและข้อผิดพลาดในการสร้างหายไป


0

ฉันมีปัญหาเดียวกันและพบว่าไฟล์ vue ของฉันถูกตั้งชื่อเป็นตัวพิมพ์เล็กเช่นนี้: event.vue ในการแก้ปัญหานี้ฉันเปลี่ยนชื่อเป็น Event.vue และอัปเดตตำแหน่งที่ฉันนำเข้าจากนั้นก็ใช้งานได้ สำหรับคำสั่งนำเข้ามีลักษณะดังนี้:

ก่อน

นำเข้าเหตุการณ์จาก '@ / components / NewsAndEvents / event' หลังจากเปลี่ยนชื่อไฟล์แล้วจะต้องมีลักษณะดังนี้:

นำเข้าเหตุการณ์จาก '@ / components / NewsAndEvents / Event'

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.