Webpack: "có nhiều mô-đun có tên chỉ khác nhau về cách viết hoa" nhưng các mô-đun được tham chiếu là giống hệt nhau

Question 1

Tôi đang sử dụng webpack 3.8.1 và nhận được một số trường hợp cảnh báo bản dựng sau:

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

Điều khó hiểu là 'hai' tệp được tham chiếu chỉ là một tệp — không có hai tệp nào trong thư mục có tên chỉ khác nhau trong trường hợp.

Tôi cũng nhận thấy rằng trình tải lại nóng của tôi thường không nhận các thay đổi đối với tệp nếu tệp đó bị ảnh hưởng bởi những cảnh báo này.

Điều gì có thể gây ra vấn đề này?

Question 2

Đây thường là kết quả của một lỗi đánh máy nhỏ.

Ví dụ, nếu bạn đang nhập khẩu các module của bạn như import Vue from 'vue', import Vuex from 'vuex'.

Xem qua các tệp của bạn và kiểm tra nơi bạn đã sử dụng from 'Vue'hoặc from 'Vuex'- đảm bảo sử dụng chính xác các chữ hoa (chữ hoa) giống như trong các câu lệnh nhập của bạn.

Các mô tả lỗi lẽ ra phải được viết rõ ràng hơn, nhưng những gì tôi đã giải thích là nguyên nhân gây ra sự cố của tôi mỗi lần cho lỗi này trên các lệnh webpack.

Question 3

Đối với những người khác đang gặp phải vấn đề này và đã thử các bản sửa lỗi được đề xuất mà không gặp may, đây là một giải pháp khả thi khác.

Đảm bảo rằng đường dẫn bạn đã sử dụng trong thiết bị đầu cuối của mình có cách viết hoa chính xác. Ví dụ: nếu bạn đang sử dụng git bash trên Windows và dự án của bạn có đường dẫn sau:

C:\MyProjects\project-X

Nếu bạn truy cập nó bằng cách sử dụng cd /c/myprojects/project-x(lưu ý trường hợp thiếu vốn) và sau đó chạy, npm startbạn có thể gặp phải vấn đề này.

Giải pháp sẽ là xem xét đường dẫn dự án phân biệt chữ hoa chữ thường và sử dụng nó như sau:

cd /C/MyProjects/project-X

Question 4

Nó đã xảy ra với tôi ở góc 6. Đó là lỗi viết hoa và viết sai chữ nhỏ mà ý tưởng hoặc trình soạn thảo văn bản của bạn có thể bỏ qua. TÔI ĐÃ SỬ DỤNG

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

THAY VÌ

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

HÌNH ẢNH CHỈ LÀ "P" và "p". Chúc may mắn.

Question 5

OMG Cuối cùng tôi đã tìm ra giải pháp cho vấn đề của mình.

Tôi đang sử dụng VS Code Terminal và nó đang sử dụng máy tính để bàn thay vì Máy tính để bàn trong đường dẫn của lời nhắc:

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

Để khắc phục, tôi chỉ cần đóng thư mục dự án và mở lại:

File -> Close Folder
File -> Open Folder

Và bây giờ VS Code Terminal đang sử dụng đường dẫn nhắc chính xác.

Question 6

Tôi đã có cùng một vấn đề trong dự án góc 6.

Sự cố này xảy ra vì trong khi nhập thành phần trong mô-đun như

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

Tôi đã viết giống như quản lý-Exam trong đó Exam được viết hoa và webpack hiểu chữ cái nhỏ .

Ngay sau khi tôi sử dụng

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

đã sử dụng kỳ thi nhỏ và vấn đề đã được giải quyết.

Question 7

vấn đề này xảy ra với tôi khi tôi cố gắng chạy npm starttrong thiết bị đầu cuối vscode trên máy tính cửa sổ. và vấn đề là /desktop/flatsomethay vào đó, /Desktop/flatsomechỉ cần thay đổi đường dẫn đến Máy Dtính để bàn có viết hoa thay vì máy tính để bàn bằng chữ thường dtrong thiết bị đầu cuối vscode của bạn

Question 8

Chúng tôi chạy phản ứng trên Windows và một trong những nhà phát triển của tôi đã thấy điều này, nhưng không ai khác gặp sự cố.

Tôi đã xem họ mở Mã VS vào một thư mục con của dự án, sau đó thực hiện cdvới thư mục dự án bằng chữ thường (thay vì trường hợp hỗn hợp thực tế), sau đó chạy npm start.

Bạn thực sự có thể thấy tên thư mục ở dạng chữ thường trong terminal giống như c:\someproject\somedirtrong Windows explorer c:\SomeProject\SomeDir.

Tôi rất ngạc nhiên khi thiết bị đầu cuối lệnh của Windows cho phép bạn làm điều này.

Question 9

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

Hy vọng hai cách sẽ giải quyết được vấn đề của bạn。

Question 10

Nếu bạn đang sử dụng VS Code và bạn đang thực hiện " npm run dev " nhưng thư mục dự án tương ứng không được mở trong VS Code thì 3 cảnh báo này sẽ xảy ra.

Vì vậy, giải pháp là: Đầu tiên mở thư mục dự án tương ứng sau đó chỉ thực hiện "npm run dev"

Question 11

Có, điều này xảy ra nếu bạn sử dụng đã sử dụng cùng tên nhưng thay đổi chữ hoa: ví dụ: bạn đã sử dụng

import React from 'React';

Thay vì:

import React from 'react';

Question 12

Tôi cũng có cảnh báo này, nhưng vấn đề của tôi là, ví dụ: có thư mục tệp của dự án React:

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

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

Và sẽ có một cảnh báo tương tự. Bởi vì bạn không nên sử dụng cùng một tên tệp (chẳng hạn như action.jstrong các thư mục đó) index.js, nếu không, điều này có thể dẫn đến hành vi không mong muốn khi biên dịch trên hệ thống tệp có ngữ nghĩa chữ hoa chữ thường khác.

Để giải quyết cảnh báo này, chúng tôi có thể làm điều đó:

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

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

Đây là kinh nghiệm của tôi, hy vọng nó có thể giúp ích cho ai đó.

Question 13

Tôi đã gặp lỗi tương tự nhưng không hoàn toàn giống với các câu trả lời khác được mô tả. Tôi hy vọng câu trả lời của tôi có thể giúp ai đó.

Tôi đang nhập một tệp trong hai thành phần (dự án góc 7):

Thành phần 1:

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

Thành phần 2:

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

Đây là một sai lầm ngớ ngẩn: vấn đề ở đây là tôi đang sử dụng hai yêu cầu khác biệt trên cùng một tệp với các chữ cái viết hoa khác nhau (nó tạo ra một cảnh báo).

Làm thế nào để giải quyết vấn đề ?Sử dụng cùng một mô hình.

Thành phần 1:

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

Thành phần 2:

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

HOẶC LÀ

Thành phần 1:

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

Thành phần 2:

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

Question 14

Vấn đề tương tự, nhưng vấn đề của tôi là các gói được cài đặt trong C:\Users\<username>\AppData\Local\Yarn. Xóa thư mục đó và thêm lại các gói chung mà tôi muốn đã khắc phục sự cố.

Question 15

Tôi đã gặp vấn đề tương tự, tôi đã đặt tên thư mục phản ứng của mình là Giao diện người dùng và đường dẫn được tạo bởi webpack bằng cách nào đó làm cho nó ở dạng chữ thường.

Vì vậy, tôi đã đổi tên nó thành ui tức là ở dạng chữ thường thay vì UI , điều đó đã khiến cuộc chiến của tôi biến mất ngay lập tức.

Cảm ơn.

Question 16

Nếu bạn thấy điều này trong Visual Studio Code và Gitbash, hãy chuyển đến cài đặt và tìm kiếm C: \ (chữ hoa C) và thay đổi đường dẫn cho Gitbash.exe thành c: \ và nó sẽ biến mất.

Question 17

Trong trường hợp của tôi (Win7, VSCode, Angular 6), sự cố vẫn tiếp diễn ngay cả khi tôi đã sửa đường dẫn trường hợp sai ở khắp mọi nơi. Có vẻ như webpack đã lưu đường dẫn vào bộ nhớ cache bằng cách nào đó, vì vậy để giải quyết nó:

Đổi tên thư mục hoặc tệp gây ra sự cố thành một thứ khác
Xây dựng
Có lỗi
Đổi tên lại
Xây dựng
Sự thành công

Question 18

Tôi cũng có cùng một vấn đề. Tôi đã điều hướng đến thư mục Trade_v3, trong khi thư mục thực tế là Trade_V3. Sau khi thay đổi thư mục, lỗi này không xuất hiện.

Question 19

Trường hợp của ổ đĩa chữ cái cũng quan trọng. Trong trường hợp của tôi, Windows 10 có chữ hoa 'C' trong khi tôi có chữ 'c' trong tệp.

Question 20

Tôi phải đối mặt với cùng một vấn đề trong Vue.js . Cuối cùng thì hóa ra là tôi đã nhập một thành phần ở hai nơi có không gian tên khác nhau.

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

import Step1 from './Step1'

Đã sửa nó bằng cách thay đổi cái thứ hai thành:

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

Hy vọng rằng nó sẽ giúp một số bạn ...

Question 21

Vấn đề tương tự cũng xảy ra với tôi, vì tôi đã đổi tên thư mục dự án của mình thành "Myclass", và trong git bash, nó là "myclass" vì một số lý do. Khi tôi thay đổi thành "m" thấp hơn, thông báo dừng lại.

Question 22

Không có giải pháp nào trong số này hiệu quả với tôi. Điều gì đã làm là:

Xóa các tệp có vấn đề (nhưng hãy sao lưu chúng ở một nơi khác!).
Cam kết thay đổi đối với Git.
Thêm lại các tệp tương tự từ bản sao lưu của bạn.
Cam kết các tệp mới cho Git ... vấn đề đã được giải quyết!

Trong trường hợp của tôi, tôi chỉ cần thay đổi cách viết hoa tên tệp của mình có chứa các mô-đun đã nhập. Chúng hiển thị dưới dạng chữ thường trong hệ thống tệp (OSX Finder, Bash) và trong trình soạn thảo mã (VS Code). Tuy nhiên, khi mở tệp trong mã VS vẫn hiển thị cho tôi tên tệp cũ trong tab trình chỉnh sửa mã. Tôi đã thử xóa hoàn toàn các tệp và sau đó thêm lại chúng. Điều này không hiệu quả - các tệp mới được thêm vào vẫn hiển thị tên cũ trong các tab trình chỉnh sửa và các bản dựng của tôi vẫn bị hỏng.

Sau đó, sau một vài giờ cố gắng sửa chữa vô ích, tôi phát hiện ra rằng Git không coi những thay đổi về cách viết hoa tệp là những thay đổi, vì vậy nó thực sự không bao giờ thay đổi những tên tệp đó:

Làm cách nào để thực hiện các thay đổi tên tệp chỉ phân biệt chữ hoa chữ thường trong Git?

Vì vậy, tôi đã xóa các tệp có vấn đề, cam kết với Git, thêm lại chúng và cam kết lại - và nó đã hoạt động. Không có cảnh báo và lỗi xây dựng biến mất.

Question 23

Nếu bạn gặp lỗi này trong liên kết của next.js (vào React):

import Link from 'next/Link'

THAY VÌ

import Link from 'next/link'