خطأ module not found في React

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

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

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

App.js

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

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

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

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

{
  // ...
  
  "dependencies": {
    "bootstrap": "^4.6.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>

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

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

App.js

بتاريخ 13 ساعات قال سامح أشرف:

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

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

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

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

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

 

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

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

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

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

npm i

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

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

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

App.js

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

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

بتاريخ 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"

  }

}

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

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

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

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

الى

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

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