Sunday, March 5, 2017

Upgrade from elixir to laravel mix

I updated my laravel 5.4 app to use webpack instead of elixir, everything compiles fine.. but all my dependencies are giving me errors in the console and not running. Here is a example:

Old gulpfile.js for home scripts using Laravel Elixir

    mix.scripts([
    '/libs/markerclusterer.min.js',
    '/libs/typed.min.js',
    'resources/assets/js/home.js'
    ], 'public/js/home.js');

Same task in Webpack using Laravel Mix

mix.js('resources/assets/js/home.js', 'public/js');

home.js (now requiring scripts here, using dependencies from npm)

require('marker-clusterer-plus');
require('typed.js');

new MarkerClusterer(map, markers);

$(".typed").typed({options});

But then after the script compiles I get ReferenceErrors with all my dependencies. Running the script home.js above yields:

Uncaught ReferenceError: MarkerClusterer is not defined
at Object.createMarkers (home.js:10854)
at Object.<anonymous> (home.js:10803)
at fire (home.js:3378)
at Object.fireWith [as resolveWith] (home.js:3508)
at done (home.js:9315)
at XMLHttpRequest.<anonymous> (home.js:9557)

// Samething for typed-js

Uncaught TypeError: $(...).typed is not a function
at HTMLDocument.<anonymous> (home.js:10868)
at mightThrow (home.js:3643)
at process (home.js:3711)

In the compiled home.js MarkerClusterer and typed-js are indeed there. I'm just starting with webpack so I'm not sure what i'm I doing incorrectly.



via enriqg9

Advertisement