0

I have a problem with webpack.mix in laravel, my modules are not being recognized, i did some research for figuring out what could be happening:

This is my app.js file from resources/assets/js

console.log('Test');
require('imagesloaded')
require('jquery')
require('slick-carousel')

In the console i see 'Test', but all the other modules are not recognized, in public/js i have the init files for each module but is not working, i even try this in webpack.mix.js:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .extract([
       'jquery',
       'slick-carousel',
       'imagesloaded'
    ])
    .options({
       uglify: true,
    })

And importing vendor.js.

I also tried initializing the modules in the app.js file, for initializing i mean just slick(), i also tried giving each require a variable name, and using syntax import "modulename", but nothing...

Any ideas of what could be happening?

After some trial and error with DigitalDrifer this is the app.js file working

import $ from 'jquery'
const imagesLoaded = require('imagesloaded')
const slick = require('slick-carousel')

With all the code for initializing each package inside app.js (below requiring), not in different folders, according to this that is a bad practice anyways.

gonzarodriguezt
  • 191
  • 3
  • 12
  • You've ran `npm install` first, right? – Brian Lee Jul 13 '18 at 05:05
  • Yes, i compile with npm run watch/dev – gonzarodriguezt Jul 13 '18 at 05:09
  • Hard to say what the problem could be without seeing the `app.js` and `webpack.mix.js` files in entirety. – Brian Lee Jul 13 '18 at 05:14
  • The app.js file is literally just that and now i edit the webpack.mix.js – gonzarodriguezt Jul 13 '18 at 05:22
  • How is the proper way to tackle this? Just importing and adding the assets file to the layout right? Or it's better with the vendor.js thing – gonzarodriguezt Jul 13 '18 at 05:29
  • So, you've ran `npm install` and `npm run dev`, it successfully builds and outputs to `public/js` and the `app.js` file is included in your `app.blade.php` template? – Brian Lee Jul 13 '18 at 05:30
  • Exactly, even showing the 'Test' from the console.log – gonzarodriguezt Jul 13 '18 at 05:50
  • 1
    Seems like you've done everything right, can you open the `app.js` file in the web inspector and see the script contents? Are there any errors in the console? – Brian Lee Jul 13 '18 at 06:06
  • I have: slick is not a function and imagesLoaded is not defined, both stop to appear when i delete the includes of the app.blade.php and 'Test' of course – gonzarodriguezt Jul 13 '18 at 17:22
  • That sounds like a problem with slick and imagesLoaded trying to initialize before jquery is fully loaded. Try moving `require('jquery')` above `require('imagesLoaded')` – Brian Lee Jul 13 '18 at 20:45
  • Yooooo!!!!! Now i get imagesLoaded working! Finally! Okay now i know it was my dumb fault (not laravel's haha), slick still not working but i'm gonna keep trying and have some fresh ideas, thanks a lot man! And for the patience :) – gonzarodriguezt Jul 13 '18 at 21:11
  • All working now, post edited with the final app.js file! – gonzarodriguezt Jul 13 '18 at 21:16
  • Cool, glad it's working. It's obvious now looking at it, I haven't worked with jquery in years so it's easy to forget the nuances. – Brian Lee Jul 13 '18 at 21:51
  • Now that you got everything working, why in the name of everything modern are you using jquery and vue? It's like using a horse to propel your new Tesla car. Are you sure you even need vue if you depend on old js? There are plenty carousel libraries for vue, you can even check out vuetify since you're moving in vue's direction. Good luck. – N.B. Jul 13 '18 at 23:07
  • Lool, i'm not using it anymore, but slick.js does, i dont know why neither, i think it's time to look other carousels haha – gonzarodriguezt Jul 14 '18 at 02:16

0 Answers0