Compiling and initializing external JS library in Laravel mix Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Compiling and initializing external JS library in Laravel mix without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am using Laravel mix to compile all my assets, but I’m having trouble initializing an external library.

I have used npm install aos --save to get the dependency, and within my app.js I am calling it like this:

require('aos/dist/aos');
AOS.init();

My mix file:

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

Now inside a view I am including the file in head:

<script defer src="{{ mix('js/app.js') }}"></script>

But I keep getting in my view that

Uncaught ReferenceError: AOS is not defined

How can I resolve it? If it is being referenced within same file and after the library requiring, why is it not working?

Answer

Going off the README on Github you can do:

import AOS from 'aos';

AOS.init();

If you’re ever unsure about how to use a npm package it’s always worth looking at the following (if they exist):

  • Description on www.npmjs.com – Google npm [package name] or use the search on npmjs.com
  • The repo README – The link for this is usually on the righthand side of the npmjs.com page
  • Official Documentation site – If there is one, it will usually be found in one of the above.
We are here to answer your question about Compiling and initializing external JS library in Laravel mix - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji