• 0

حل مشكلة عدم تثبيت الحزم في webpack

لقد قمت بتثبيت الحزم وادراجها ضمن ملف index.js بالشكل التالي 

import '@laylazi/bootstrap-rtl/dist/css/bootstrap-rtl.min.css';
import './css/style.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min';
import '@fortawesome/fontawesome-free/js/all.min';

ولكنه ظهرت لي مشكلة في الترمينال وحتى ان مكتبة الايقونات لم تعد تعمل بينما كانت تعمل سابقا ظننت ان المشكلة من تنزيل popper كما فهمت من الخطا الذي اعطاني اياه اعدت تثبيته لكنه لم ينجح ومازالت المشكلة 

هذه رسالة الخطا

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\coffee>npm run build

> coffee@1.0.0 build C:\coffee
> webpack serve

(node:6000) [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning:
optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead a
nd use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)
(Use `node --trace-deprecation ...` to show where the warning was created)
i ?wds?: Project is running at http://localhost:1239/
i ?wds?: webpack output is served from
i ?wds?: Content not from webpack is served from C:\coffee\dist
x ?wdm?: assets by info 1.39 MiB [immutable]
  assets by path *.jpeg 1.32 MiB 12 assets
  assets by path *.jpg 75.8 KiB
    asset b43286bd493efbc2bf35.jpg 33.8 KiB [emitted] [immutable] [from: src/ima
ges/a3.jpg]
    asset 21d0191046d0f29643dd.jpg 27.8 KiB [emitted] [immutable] [from: src/ima
ges/a1.jpg]
    asset ddd48e0262fea7b244d0.jpg 7.87 KiB [emitted] [immutable] [from: src/ima
ges/a2.jpg]
    asset aa2e7f1cf6dd9b7cc295.jpg 6.38 KiB [emitted] [immutable] [from: src/ima
ges/a4.jpg]
assets by path *.html 62.5 KiB 7 assets
assets by chunk 1.82 MiB (name: main)
  asset main.js 1.66 MiB [emitted] (name: main)
  asset css/style.css 161 KiB [emitted] (name: main)
Entrypoint main 1.82 MiB = css/style.css 161 KiB main.js 1.66 MiB
runtime modules 1.25 KiB 6 modules
orphan modules 19.4 KiB [orphan] 1 module
modules by path ./node_modules/ 1.61 MiB (javascript) 159 KiB (css/mini-extract)

  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
  modules by path ./node_modules/@laylazi/bootstrap-rtl/dist/css/*.css 50 bytes
(javascript) 159 KiB (css/mini-extract)
    ./node_modules/@laylazi/bootstrap-rtl/dist/css/bootstrap-rtl.min.css 50 byte
s [built]	    

css ./node_modules/css-loader/dist/cjs.js!./node_modules/@laylazi/bootstrap-

	rtl/dist/css/bootstrap-rtl.min.css 159 KiB [built] [code generated]

	modules by path ./src/ 313 bytes (javascript) 4.93 KiB (css/mini-extract)

	  ./src/index.js 263 bytes [built] [code generated]

	  ./src/css/style.css 50 bytes [built] [code generated]

	  css ./node_modules/css-loader/dist/cjs.js!./src/css/style.css 4.93 KiB [built]

	 [code generated]

ERROR in ./node_modules/bootstrap/dist/js/bootstrap.min.js 6:85-110
Module not found: Error: Can't resolve '@popperjs/core' in 'C:\coffee\node_modul
es\bootstrap\dist\js'
resolve '@popperjs/core' in 'C:\coffee\node_modules\bootstrap\dist\js'
  Parsed request is a module
  using description file: C:\coffee\node_modules\bootstrap\package.json (relativ
e path: ./dist/js)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\coffee\node_modules\bootstrap\dist\js\node_modules doesn't exist or is
not a directory
      C:\coffee\node_modules\bootstrap\dist\node_modules doesn't exist or is not
 a directory
      C:\coffee\node_modules\bootstrap\node_modules doesn't exist or is not a di
rectory
      C:\coffee\node_modules\node_modules doesn't exist or is not a directory
      looking for modules in C:\coffee\node_modules
        single file module
          using description file: C:\coffee\package.json (relative path: ./node_
modules/@popperjs/core)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\coffee\node_modules\@popperjs\core doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\coffee\node_modules\@popperjs\core.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              C:\coffee\node_modules\@popperjs\core.json doesn't exist
            .wasm
              Field 'browser' doesn't contain a valid alias configuration
              C:\coffee\node_modules\@popperjs\core.wasm doesn't exist
        C:\coffee\node_modules\@popperjs\core doesn't exist
      looking for modules in C:\node_modules
        single file module
          No description file found in C:\node_modules\@popperjs or above
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            C:\node_modules\@popperjs\core doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            C:\node_modules\@popperjs\core.js doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            C:\node_modules\@popperjs\core.json doesn't exist
          .wasm
            Field 'browser' doesn't contain a valid alias configuration
            C:\node_modules\@popperjs\core.wasm doesn't exist
        C:\node_modules\@popperjs\core doesn't exist
 @ ./src/index.js 3:0-44

webpack 5.50.0 compiled with 1 error in 14087 ms
i ?wdm?: Failed to compile.

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

لا أستطيع معاينة وحل المشكلة باستخدام الخطأ المرفق, هل يمكنك ارفاق ملفات المشروع لمعاينة المشروع والمساعدة في حلها؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ الآن قال محمد أبو عواد:

لا أستطيع معاينة وحل المشكلة باستخدام الخطأ المرفق, هل يمكنك ارفاق ملفات المشروع لمعاينة المشروع والمساعدة في حلها؟

هذه الملفات

coffee.zip

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ منذ ساعة مضت قال Najah Alsaker:

هذه الملفات

coffee.zip

المشكلة في حزمة @popperjs/core , انتي تستخدمين الاصدار الخامس من بوتستراب وهي تعتمد على الحزمة @popperjs/core , لذلك يجب تثبيتها من خلال الأمر التالي

npm install @popperjs/core

أيضا في ملف index.js يجب الانتباه الى ترتيب الملفات, فمثلا يجب استدعاء jquery قبل استدعاء بوتستراب , وايضا استدعاء popperjs قبل بوتستراب, لاحظي

import 'bootstrap/dist/js/bootstrap.min.js';
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min';

أرحو منك ترتيب الملفات كالتالي

import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min';
import 'bootstrap/dist/js/bootstrap.min.js';

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن