JavaScript Module Loading Possibly Broken

Hi Jeffrey (and others),

Love your work.

Replacing Bootstrap with Foundation in Elixir works great, but the same swap does not work in Mix. I’ve spent over 8 hours trying to figure out why before bugging you here.

I’ve created a simple modification to your laravel-mix-example that illustrates the issue.

Trying to run the resulting js results in the error foundation is not a function, because the Foundation code has not been ran at all (and so $.fn.foundation has not been defined):

As best I can tell, the module loader in Elixir generates strings like so:

It appears to do this with some kind of experimental loader called buble-loader. The eval() call ensures the code gets ran.

Mix, on the other hand, uses perhaps a different Babel loader, resulting in actual code instead of a string:

For some reason, the jQuery plugin is never registered, it’s as if it’s dealing with a different jQuery instance?

Several others are having the same issue.

Thanks in advance for any guidance.

[JeffreyWay]

@JVMartin - Maybe. I like Buble a lot. I’m not sure if it’s related in this case, though.

We’re you using mix.webpack() with Laravel Elixir? Or mix.scripts()?

Webpack has always been confusing, when it comes to jQuery plugins. But I’d like to get this all figured out so that people don’t even have to think about it.

I was able to get it working by:

1. Adding mix.autoload({}) to your webpack.mix.js file.
2. Running npm install script-loader
3. Setting bootstrap.js to:

import 'script-loader!jquery';
import 'script-loader!foundation-sites';

$(document).foundation();

But, yeah, it really sucks that this is required. There’s a big thread on Foundation’s GitHub about it: https://github.com/zurb/foundation-sites/issues/7386

[AP-Hunt]

@JeffreyWay Thanks for the mix.autoload({}) tip. That worked perfectly for me, from a fresh Laravel 5.4 install with Laravel Mix.

For others, my relevant files are below (with a little experiment to prove the event binding works).

boostrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = require('jquery');
window.jQuery = window.$;

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');

/**
 * Require Foundation JS
 */
require("foundation-sites");

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: "#app",

    mounted(){
        $(document).foundation();

        $("#dropdown-pane").on("hide.zf.dropdown", () => {
            console.log("Dropped down");
        });
    }
});

webpack.mix.js

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

// Prevents Mix's automatic configuring of jQuery, so that we
// can set it up ourselves later
// https://github.com/JeffreyWay/laravel-mix/issues/229#issuecomment-276230983
mix.autoload({});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');