How to Add Bootstrap, jQuery, and Popper.js to Laravel 8 Project Using Laravel Mix

As developers working with modern PHP frameworks like Laravel, integrating front-end libraries is a daily necessity. Setting up dependencies like Bootstrap, jQuery, and Popper.js can sometimes lead to confusing errors, especially when mixing asset compilation (like Laravel Mix) with raw script loading.

If you are running into the classic Uncaught ReferenceError: $ is not defined error after setting up your assets, it usually points to a sequencing issue rather than an installation failure. Let's dive into why this happens and how to correctly integrate these popular libraries into your Laravel 8 project using Laravel Mix.

Understanding the Dependency Conflict

You correctly identified that running composer require laravel/ui and then executing the npm commands installs the necessary packages. However, installing dependencies via Composer only handles PHP-side packages, while Laravel Mix (which uses Webpack under the hood) handles compiling your CSS and JavaScript assets.

The error $ is not defined occurs because the browser attempts to execute jQuery code (e.g., $(document).ready(...)) before the actual jQuery library file has been fully loaded and parsed by the browser. Even if you link the files in the HTML, the order of loading is paramount.

The Correct Implementation Strategy

The solution lies in ensuring that your HTML structure loads the necessary libraries in the precise order required: first the core library (jQuery), then any plugins it relies on (like Popper.js), and finally your custom application scripts.

Step 1: Verify Laravel Mix Setup

First, ensure your Laravel Mix setup is correctly configured to compile the assets. This typically involves ensuring you have Bootstrap included in your Mix configuration so that the necessary files are generated when you run npm run dev. For a clean start, always refer to official guides for best practices on asset management, which align with the principles taught by the Laravel community at laravelcompany.com.

Step 2: Correct Asset Loading Order in Blade

The most critical step is how you place your <script> and <link> tags within your main layout file (usually resources/views/layouts/app.blade.php). The JavaScript dependencies must precede any scripts that attempt to use them.

Here is the corrected structure demonstrating the proper loading sequence:

<!doctype html>
<html class="no-js" lang="da">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Mix Setup</title>
    <!-- 1. Load Bootstrap CSS first -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>

    <!-- 2. Load jQuery (The core dependency) -->
    <script src="{{ asset('js/jquery.js') }}"></script>

    <!-- 3. Load Popper.js (If required by your Bootstrap setup) -->
    <script src="{{ asset('js/popper.js') }}"></script>

    <!-- 4. Load your main application JS bundle (which includes Bootstrap JS/Popper initialization) -->
    <script src="{{ asset('js/app.js') }}"></script>

</body>
</html>

Explanation of the Fix

By following this sequence, you ensure that when the browser encounters the script that calls $(document).ready(function () { ... }) inside your custom app.js, the jQuery library ($) is already defined in the global scope.

Bootstrap CSS: Loaded in <head> for styling.
jQuery: Loaded next, making the $ variable available.
Popper.js: Loaded next, ensuring any necessary positioning logic is available before the final scripts run.
app.js: This file now safely contains your custom DOM manipulations, knowing that jQuery and Popper are ready to use.

Conclusion

The issue you faced is a common hurdle in front-end development: managing dependency loading order. While Laravel Mix handles the compilation of your CSS and JS files efficiently, the browser requires explicit, correct sequencing for external libraries like jQuery and Popper.js. By strictly adhering to the principle of loading dependencies before code that uses them, you can resolve reference errors and build robust, functional applications within your Laravel environment. Keep focusing on structured asset management; it is key to efficient development, much like optimizing database queries when working with frameworks such as those promoted by laravelcompany.com.

How to add Bootstrap, jQuery, and popper.js to Laravel 8 project using laravel-mix?