CODEWITHSUNDEEP
laravel
Pleinair
Pleinair

Reputation: 449

Laravel adding bootstrap javascript files not working

I have a Laravel project where I'm trying to add bootstrap.bundle.min.js and bootstrap.min.js files to my header.blade.php file, but I seem to be getting following errors in console:

Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://localhost:8000/css/bootstrap/js/bootstrap.bundle.min.js".

Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://localhost:8000/css/bootstrap/js/bootstrap.min.js".

Bootstrap does seem to be working but not the Javascript files that come with it.

HEADER.BLADE.PHP

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Album example for Bootstrap</title>


<script src="/css/bootstrap/js/jquery-3.4.1.min.js"></script>

<link href="/css/bootstrap/js/bootstrap.bundle.min.js" rel="stylesheet">
<link href="/css/bootstrap/js/bootstrap.min.js" rel="stylesheet">

<link href="/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="/css/main.css" rel="stylesheet">
<link href="/css/media.css" rel="stylesheet">

PACKAGE.JSON

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "alpinejs": "^2.7.3",
        "axios": "^0.21",
        "laravel-mix": "^6.0.16",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
        "sass-loader": "^11.0.1",
        "tailwindcss": "^2.0.1",
        "webpack-cli": "^4.6.0"
    },
    "name": "epood6",
    "description": "<p align=\"center\"><a href=\"https://laravel.com\" target=\"_blank\"><img src=\"https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg\" width=\"400\"></a></p>",
    "version": "1.0.0",
    "main": "webpack.mix.js",
    "directories": {
        "test": "tests"
    },
    "dependencies": [],
    "keywords": [],
    "author": "",
    "license": "ISC"
}

Upvotes: 0

Views: 969

Answers (2)

Qaisar A.
Qaisar A.

Reputation: 11

All script files should be linked with the script tag.

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js">
<script src="/bootstrap/js/bootstrap.min.js">

Please ensure the file path for scripts.

Upvotes: 1

ceejayoz
ceejayoz

Reputation: 180075

<link href="/css/bootstrap/js/bootstrap.min.js" rel="stylesheet">

.js files are not <link>s, they are <script>s.

Upvotes: 1

Related Questions