वेबपैक: "ऐसे कई मॉड्यूल हैं जिनके नाम केवल आवरण में भिन्न हैं" लेकिन संदर्भित मॉड्यूल समान हैं


86

मैं वेब पैक 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

कौन सी भ्रमित करने वाली बात यह है कि संदर्भित 'दो' फाइलें सिर्फ एक फाइल हैं - निर्देशिका में कोई दो फाइलें नहीं हैं जिनके नाम केवल मामले में भिन्न हैं।

मैंने यह भी देखा है कि मेरे गर्म लोडर अक्सर इन चेतावनियों से प्रभावित होने पर फ़ाइल में परिवर्तन नहीं करते हैं।

इस मुद्दे के कारण क्या हो सकता है?


इसे देखें, यह आपकी समस्या को हल कर सकता है stackoverflow.com/questions/61054565/…
सार्थक सकलेचा

जवाबों:


147

यह आमतौर पर माइनसक्यूल टाइपो का एक परिणाम है।

उदाहरण के लिए, यदि आप अपने मॉड्यूल को आयात कर रहे हैं import Vue from 'vue', जैसे import Vuex from 'vuex'

अपनी फ़ाइलों के माध्यम से जाएँ और जाँचें कि आपने कहाँ उपयोग किया है - from 'Vue'या from 'Vuex'अपने आयात विवरणों के समान सटीक राजधानियों (अपरकेस अक्षरों) का उपयोग करना सुनिश्चित करें।

त्रुटि विवरण अधिक स्पष्ट रूप से लिखा जाना चाहिए था, लेकिन मैंने जो समझाया वह वेबपैक कमांड पर इस त्रुटि के लिए हर बार मेरी समस्या का कारण रहा है।


8
आप सही हैं, यह पथ का नाम था, मॉड्यूल का नाम नहीं था, और यही मुझे फेंक दिया। NavBar/MainMenuItemMobile.jsनवबर में मुझे 'बी' को नीचे करना चाहिए था।
tcelferact

2
: exacly दोस्त, मेरे मामले में मैं Trow त्रुटि प्रतिक्रिया और जब मैं आयात इस्तेमाल किया import React, { Component } from 'React';बस ठीक करने के लिएfrom 'react
rflmyk

4
मेरी समस्या यह थी कि एक घटक में मैं संदर्भित कर रहा था components/vue.jsजबकि दूसरे में मैं संदर्भित कर रहा थाcomponents/Vue.js
डेनिस

आपकी टिप्पणी @ adc17 ने मुझे गुप्त उत्पादन को समझने में मदद की। WebPack GitHub Wiki में इस समाधान को पढ़ें और जैसा कि सब कुछ सही लग रहा था, बस इसका कोई मतलब नहीं हो सकता था। यह आश्चर्यजनक है कि जब आप टेक्स्ट सेट बहुत छोटा करते हैं तो 'एल' बिल्कुल 'एल' की तरह दिखता है ... हीहे।
लड़के पार्क

1
बस जोड़ने के लिए - जब मुझे यह त्रुटि मिली, यह इसलिए था क्योंकि मेरा रास्ता GitBashएक निचले हिस्से में था usersजहां Webpackएक अपरकेस की उम्मीद थी Users
नींद 13

81

दूसरों के लिए जो इस मुद्दे का सामना कर रहे हैं और बिना किसी भाग्य के सुझाए गए सुधारों की कोशिश की है, यहां एक और संभव समाधान है।

सुनिश्चित करें कि आपने अपने टर्मिनल में जिस पथ का उपयोग किया है, उसका सही कैपिटलाइज़ेशन है। उदाहरण के लिए यदि आप Windows पर git bash का उपयोग कर रहे हैं और आपकी परियोजना में निम्नलिखित पथ हैं:

C:\MyProjects\project-X

यदि आप इसका उपयोग करते हैं cd /c/myprojects/project-x(पूंजी मामलों की कमी पर ध्यान दें) और फिर चलाएं तो npm startआपको इस समस्या का सामना करना पड़ सकता है।

समाधान परियोजना पथ मामले के प्रति संवेदनशील होगा और इसका उपयोग निम्नानुसार होगा:

cd /C/MyProjects/project-X


11
बस यही मेरी समस्या है। धन्यवाद!
user2138568

1
आपने मेरा दिन बचाया! आपका बहुत बहुत धन्यवाद!
जेफ चेन

1
वाह .... आपने बस मेरी मदद की! मैं मुख्य रूप से विंडोज पर गिट बैश का उपयोग करता हूं। मेरे पास गलत केसिंग था, एक बार जब मैंने इसे बदल दिया, तो यह काम कर गया। यह ध्यान देने योग्य है, पॉवर्स में अनुचित आवरण समान त्रुटियों के परिणामस्वरूप नहीं होगा, ऐसा लगता है कि पथ को पर्दे के पीछे कहीं उपयुक्त मामले में परिवर्तित किया जा रहा है।
रयान ईस्टाब्रुक

2
मेरे पास यह सटीक मुद्दा था; हालाँकि, अलग-अलग पथ आवरण के साथ अलग-अलग समय पर अलग-अलग पैकेज स्थापित करने के बाद, मेरा node_modulesफ़ोल्डर hosed किया गया था। मैंने इसे पूरी तरह से हटा दिया, फिर से भाग गया npm installऔर सभी चेतावनियाँ चली गईं।
नैट

1
आपने मेरा दिन बचाया!
हिरुणी निमन्थी

17

यह मुझे कोणीय 6 पर हुआ। यह पूंजी और छोटे अक्षर का गलत प्रयोग है, जिसे आपके विचारक या पाठ संपादक अनदेखा कर सकते हैं। मैंनें इस्तेमाल किया

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

के बजाय

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

इमेजिस बस "पी" और "पी"। सौभाग्य।


1
मेरे लिए यह विंडोज पर 10. (गलत datatables.net-fixedheader) के बजाय (सही) था DataTables.net-fixedheader
जोनास ग्रोगर

9

OMG मैं अंत में अपनी समस्या का समाधान पाया।

मैं उपयोग कर रहा हूँ वी.एस. कोड टर्मिनल और उसका उपयोग करना था डेस्कटॉप के बजाय डेस्कटॉप शीघ्र की राह में:

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

इसे ठीक करने के लिए, मुझे प्रोजेक्ट फ़ोल्डर को बंद करना होगा और उसे फिर से खोलना होगा:

File -> Close Folder
File -> Open Folder

और अब VS कोड टर्मिनल सही प्रॉम्प्ट पथ का उपयोग कर रहा है।


3

मुझे कोणीय 6 परियोजना में एक ही मुद्दा था।

मॉड्यूल में घटक आयात करते समय यह समस्या हुई

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

मैंने मैनेज-एग्जाम जैसा लिखा है जहां एग्जाम कैपिटल लेटर में होता है और वेबपैक छोटे लेटर को समझता है

जैसे ही मैंने इस्तेमाल किया

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

छोटी और समस्या हल करने में परीक्षा का उपयोग किया।


3

यह समस्या मेरे साथ तब होती है जब मैं npm startविंडो मशीन पर vscode टर्मिनल में चलाने की कोशिश करता हूं । और इस मुद्दे को किया गया था /desktop/flatsomeबजाय /Desktop/flatsomeसिर्फ डेस्कटॉप के लिए पथ पूंजी के साथ बदलने के Dडेस्कटॉप के बजाय छोटे अक्षरों के साथ dअपने vscode टर्मिनल में


धन्यवाद!। पागल हो रहा था।
इलही

2

हम विंडोज पर प्रतिक्रिया चलाते हैं और मेरे एक डेवलपर्स ने इसे देखा, लेकिन किसी और के पास मुद्दा नहीं था।

मैंने उन्हें प्रोजेक्ट की एक उप-निर्देशिका के लिए वीएस कोड खोलते हुए देखा, फिर cdप्रोजेक्ट डायरेक्ट्री के साथ लोअरकेस (वास्तविक मिश्रित मामले के बजाय) किया, फिर चला npm start

आप वास्तव में टर्मिनल में लोअरकेस में डायरेक्टरी नाम देख सकते हैं c:\someproject\somedirलेकिन विंडोज एक्सप्लोरर में यह है c:\SomeProject\SomeDir

मुझे आश्चर्य हुआ कि विंडोज कमांड टर्मिनल आपको ऐसा करने की अनुमति देता है।


1
इसका कारण यह है ... विंडोज़ फ़ाइल सिस्टम असंवेदनशील है / है। (क्योंकि विंडोज़ 10 में आप इसे संवेदनशील होने के लिए सेट कर सकते हैं, मैं देख रहा हूं)
कोडी

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'

आशा है कि दो तरीके आपकी समस्या का समाधान करेंगे solve


1

यदि आप VS कोड का उपयोग कर रहे हैं और आप " npm run dev " कर रहे हैं, लेकिन संबंधित प्रोजेक्ट फ़ोल्डर VS कोड में नहीं खोला गया है तो ये 3 चेतावनियाँ आएंगी।

तो समाधान यह है: पहले संबंधित प्रोजेक्ट फ़ोल्डर खोलें, उसके बाद केवल "npm run dev" करें


1

हां यह तब होता है जब आप उपयोग करते हैं एक ही नाम का उपयोग किया है, लेकिन मामले में परिवर्तन के साथ: उदाहरण के लिए, आपने उपयोग किया है

import React from 'React';

के बजाय:

import React from 'react';

0

मेरे पास यह चेतावनी भी है, लेकिन मेरी समस्या यह है कि, उदाहरण के लिए, रिएक्ट प्रोजेक्ट की फ़ाइल निर्देशिका है:

**/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 यानी केस के बजाय यूआई , कि मेरे युद्धरत जाने अभी बनाया है।

धन्यवाद।


0

यदि आप इसे Visual Studio Code और Gitbash में देख रहे हैं, तो सेटिंग्स पर जाएँ, और C: \ (अपरकेस सी) को खोजें और Gitbash.exe के लिए c: \ और पथ को बदल दें और यह चला जाएगा।


0

मेरे मामले में (Win7, VSCode, Angular 6) मुद्दा तब भी बना रहता है जब मैंने हर जगह गलत केस का रास्ता तय कर दिया था। वेबपैक किसी तरह पथ को कैश करता है, इसलिए इसे हल करने के लिए:

  • फ़ोल्डर या फ़ाइल का नाम बदलें जो कुछ अलग करने के लिए समस्याओं का कारण बनता है
  • बिल्ड
  • त्रुटि हो गई
  • नाम बदला
  • बिल्ड
  • सफलता

0

मेरी भी यही समस्या थी। मैंने एक निर्देशिका Trade_v3 में नेविगेट किया था, जबकि वास्तविक निर्देशिका Trade_V3 थी। निर्देशिका बदलने के बाद यह त्रुटि नहीं हुई।


0

लेटर ड्राइव का मामला भी मायने रखता है। मेरे मामले में, विंडोज 10 में ऊपरी केस 'सी' था जबकि मेरे पास फाइल में कम केस 'सी' था।


0

मुझे Vue.js में इसी समस्या का सामना करना पड़ा । आखिरकार यह पता चला कि मैंने अलग-अलग नामस्थानों के साथ दो स्थानों पर एक घटक आयात किया है।

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

import Step1 from './Step1'

इसे दूसरे में बदलकर निश्चित करें:

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

उम्मीद है कि यह आप में से कुछ मदद करता है ...


0

एक ही समस्या मेरे साथ हुई, क्योंकि मैंने अपने प्रोजेक्ट फोल्डर का नाम बदलकर "मायक्लास" कर दिया था, और गिट बैश में यह किसी कारण से "मायक्लास" था। जब मैं "एम" को कम करने के लिए बदल गया, तो संदेश बंद हो गया।


0

इनमें से किसी भी समाधान ने मेरे लिए काम नहीं किया। क्या किया था:

  • समस्याग्रस्त फ़ाइलों को हटाएं (लेकिन कहीं और उनका बैकअप बनाएं!)।
  • Git में परिवर्तन करें।
  • अपने बैकअप से फिर से वही फाइलें जोड़ें।
  • Git के लिए नई फ़ाइलों के लिए प्रतिबद्ध ... समस्या हल!

मेरे मामले में मैंने केवल आयातित मॉड्यूल वाले अपनी फ़ाइल नामों के पूंजीकरण को बदल दिया था। वे फाइल सिस्टम (OSX फाइंडर, बैश) और कोड एडिटर (VS कोड) में लोअर-केस के रूप में दिखाई दे रहे थे। हालाँकि, VS कोड में फाइलें खोलना अभी भी मुझे कोड एडिटर टैब में पुरानी फाइल का नाम दिखा रहा था। मैंने पूरी तरह से फ़ाइलों को हटाने की कोशिश की और फिर उन्हें जोड़ दिया। यह काम नहीं किया - नई गयी फाइलें अभी भी संपादक टैब में पुराने नामों को प्रदर्शित कर रही थीं, और मेरे बिल्ड अभी भी टूट रहे थे।

फिर कुछ घंटों के निरर्थक सुधार के प्रयासों के बाद मुझे पता चला कि Git में परिवर्तन के रूप में फ़ाइल कैपिटलाइज़ेशन के संबंध में परिवर्तन नहीं है, इसलिए इसने वास्तव में उन फ़ाइल नामों को कभी नहीं बदला:

मैं केस-संवेदी परिवर्तन को केवल Git में कैसे बदला जा सकता है?

इसलिए मैंने समस्याग्रस्त फ़ाइलों को हटा दिया, Git के लिए प्रतिबद्ध, उन्हें फिर से जोड़ा और फिर से प्रतिबद्ध - और यह काम किया। कोई चेतावनी नहीं और बिल्ड त्रुटियाँ गायब हो गईं।


0

यदि आपको यह त्रुटि अगली .js (प्रतिक्रिया में) के लिंक में है:

import Link from 'next/Link'

के बजाय

import Link from 'next/link'
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.