اذهب إلى المحتوى
  • 0

خطأ module not found في React

صـيـت احمد

السؤال

السلام عليكم

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

 

Untitled.png

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

Recommended Posts

  • 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>

 

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

  • 1
بتاريخ 3 ساعات قال صـيـت احمد:

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

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

App.js

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

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

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

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

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

 

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

  • 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 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...