• 0

خطأ module not found في React

السلام عليكم

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

 

Untitled.png

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1
بتاريخ 3 ساعات قال صـيـت احمد:

اخي عبدالمجيد فعلت كما قلت والى الان لم تحل المشكلة 

المشروع لتو بدأت فيه اخي محمد 

App.js

يبدو أن لديك خطأ بسيط في إستدعاء Bootstrap حيث يجب أن يكون بهذا الشكل:

import 'bootstrap/dist/css/bootstrap.min.css';

لاحظ اسم الملف bootstrap.min.css مكتوب لديك بشكل خاطيء.

يجب أيضًا أن تتأكد من أنك قمت بتثبيت bootstrap بشكل صحيح من خلال التحقق من ملف package.json والذي يجب أن يحتوي على التالي:

{
  // ...
  
  "dependencies": {
    "bootstrap": "^4.6.0",	// يجب أن يكون لديك بوتستراب مثبت
  },
  // ...
}

 

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


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

الرجاء التأكد من استدعاء البوتستراب بطريقة صحيحة . إذا لم يعمل الرجاء إرفاق ملف المشروع مضغوط

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


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

المشكلة هي أنه لم يجد ملف bootstrap

يجب عليك التأكد أنك قمت بإستدعائه بشكل صحيح

يمكن القيام بتثبته عبر npm بإستخدام هذا الأمر

npm install bootstrap@3

أو يمكنك بإختصار إضافة bootstrap في ملف index.html في المجلد Public

وإضافة هذه الروابط

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 

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


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

اخي عبدالمجيد فعلت كما قلت والى الان لم تحل المشكلة 

المشروع لتو بدأت فيه اخي محمد 

App.js

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


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

يبدو أن لديك خطأ بسيط في إستدعاء Bootstrap حيث يجب أن يكون بهذا الشكل:


import 'bootstrap/dist/css/bootstrap.min.css';

لاحظ اسم الملف bootstrap.min.css مكتوب لديك بشكل خاطيء.

يجب أيضًا أن تتأكد من أنك قمت بتثبيت bootstrap بشكل صحيح من خلال التحقق من ملف package.json والذي يجب أن يحتوي على التالي:


{
  // ...
  
  "dependencies": {
    "bootstrap": "^4.6.0",	// يجب أن يكون لديك بوتستراب مثبت
  },
  // ...
}

 

شكرا لك اخي سامح بالمشاركه فعلت الذي قلت عليه وعند اضافة الاكواد الذي ارسلته في package.json لايعمل نهائيا والى الان نفس المشكلة

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 2 ساعات قال صـيـت احمد:

شكرا لك اخي سامح بالمشاركه فعلت الذي قلت عليه وعند اضافة الاكواد الذي ارسلته في package.json لايعمل نهائيا والى الان نفس المشكلة

أعتقد أن Bootstrap لم يكن مثبتًا لديك، بعد إضافته في ملف package.json هل بإمكانك تنفيذ الأمر التالي، ثم إعادة تشغيل المشروع:

npm i

 

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 23 ساعات قال صـيـت احمد:

اخي عبدالمجيد فعلت كما قلت والى الان لم تحل المشكلة 

المشروع لتو بدأت فيه اخي محمد 

App.js

هذا الملف الرئيسي فقط يجب عليك إرسال كامل ملفات المشروع من دون مجلد node mudules للتأكد من packages.json

وأيضا يمكنك استخدام البدائل الأخرى التي كتبتها سابقا

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


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ On 4/23/2021 at 12:47 قال سامح أشرف:

أعتقد أن Bootstrap لم يكن مثبتًا لديك، بعد إضافته في ملف package.json هل بإمكانك تنفيذ الأمر التالي، ثم إعادة تشغيل المشروع:


npm i

 

فعلت ماقلت عليه والا الان المشكلة قائمة 

بتاريخ On 4/23/2021 at 16:32 قال عبدالمجيد الجرادي:

هذا الملف الرئيسي فقط يجب عليك إرسال كامل ملفات المشروع من دون مجلد node mudules للتأكد من packages.json

وأيضا يمكنك استخدام البدائل الأخرى التي كتبتها سابقا

packaed.json من دون اضافات

{

  "name": "weather",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^5.11.10",

    "@testing-library/react": "^11.2.6",

    "@testing-library/user-event": "^12.8.3",

    "bootstrap": "^3.4.1",

    "react": "^17.0.2",

    "react-bootstrap": "^1.5.2",

    "react-dom": "^17.0.2",

    "react-router-dom": "^5.2.0",

    "react-scripts": "4.0.3",

    "src": "^1.1.2",

    "web-vitals": "^1.1.1"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"



    

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  },

  "devDependencies": {

    "css-loader": "^5.2.4",

    "style-loader": "^2.0.0"

  }

}

 

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


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

اولا Bootstrap موجود في packages.json 

ثانيا يجب عليك تشغيل الأمر npm install لتثبيت جميع الحزم التي في packages.json

وآخيراً في الملف App.js يجب عليك تغيير 

import 'bootstrap/dist/css/bootstarp.min.css';

الى

import 'bootstrap/dist/bootstrap.min.css';

فكما تلاحظ لا يوجد css 

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


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

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

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

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


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

تسجيل الدخول

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


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