0

My javascript scripts and bootstrap file are not loading. When I am using inspect element the error I am getting is this

Error

Files attached to the header are

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta http-equiv="x-ua-compatible" content="ie=edge">


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>
  <script src="https://kit.fontawesome.com/4ccd9cbb4a.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link href="css/styles.css" rel="stylesheet">
    <title>Ristorante Con Fusion</title>
</head>

I have also tried installing, the scripts using the npm commands using the cmd, and used the files locally on my machine. But it was not producing results, so I tried to use the files https file inclusion format.

This my my Package.json file

{
  "name": "confusion",
  "version": "1.0.0",
  "description": "This is a website for Ristorante Con Fusion",
  "main": "index.html",
  "scripts": {
    "start": "npm run lite",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lite": "lite-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.5.4"
  },
  "dependencies": {
    "bootstrap": "^4.0.0",
    "bootstrap-social": "^5.1.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "popper.js": "^1.12.9"
  }
}
Ramesh Rajendran
  • 32,579
  • 35
  • 130
  • 205
  • what makes you think your javascript isn't loading? the error messages only refer to your two css not loading, perhaps your server is misconfigured, since it is issuing a mimetype of text/html for css, which is wrong - all three **script** tags refer to correct and present scripts – Jaromanda X Oct 01 '19 at 05:59
  • Possible duplicate of https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type – Saharsh Oct 01 '19 at 06:01
  • because when I am trying to navigate from one tab to another it's not working, considering I am using bootstrap tab panel class –  Oct 01 '19 at 06:05
  • Are you using angular in your application? – Ramesh Rajendran Oct 01 '19 at 06:13
  • no its simple bootstrap4 this my package.json file –  Oct 01 '19 at 06:16
  • Possible duplicate of [Stylesheet not loaded because of MIME-type](https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type) – Liam Oct 01 '19 at 07:59

2 Answers2

0

you need to add type="text/css" 

 <link type="text/css" rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
Mohammad Ali Rony
  • 3,431
  • 2
  • 15
  • 27
0

Try importing bootstrap from node modules like this

const bootstrap = require('bootstrap');

jkmosdev
  • 9
  • 3