Home > Net >  Laravel UI Bootstrap does not seem to be working
Laravel UI Bootstrap does not seem to be working

Time:01-02

I'm working with Laravel version 8.53.1 and I have tried these commands to install Bootstrap authentication with Laravel:

composer require laravel/ui
php artisan ui bootstrap 
php artisan ui bootstrap --auth
npm install  && npm run dev 

But now the problem is the Login & Register blades do not read Bootstrap, and the forms look like this:

screenshot

I have even repeated running the command several times, but still, the problem exists! What's going wrong here?

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.40",
        "laravel/tinker": "^2.5",
        "laravel/ui": "^3.4",
        "maatwebsite/excel": "^3.1"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

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": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    }
}

So how can I solve this issue? I have also tried removing caches by running php artisan cache:clear and php artisan view:clear, but it didn't solve the issue.

CodePudding user response:

The first time you run npm run dev on an install of Laravel with enter image description here

CodePudding user response:

When you run the first npm install && npm run dev, a message comes up to install an additional package/dependency and run npm run dev again. The steps are:

  • npm install resolve-url-loader@^4.0.0 --save-dev --legacy-peer-deps
  • npm run dev

A screenshot for the addtional package/dependency

  • Related