bsholdice
113
1
Mix

laravel-mix & blade syntax needed to use JS package

Posted 4 weeks ago by bsholdice

I want to use https://github.com/fnando/sparkline in a new 5.8 project. I kept getting a browser error:

Uncaught ReferenceError: sparkline is not defined.'

With the help of a SO question (https://stackoverflow.com/questions/56640085/issues-compiling-laravel-webpack-and-sparkline) it seems that one solution is to use mix.copy() to simply stage the .js file in /public/js/, which is then pulled down as a in my blade.

webpack.mix.js:

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('node_modules/@fnando/sparkline/dist/sparkline.js', 'public/js');

blade.php:

<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ mix('js/sparkline.js') }}"></script>
</head>

Is there a way to .mix() the .js into my app.js and import/invoke it somehow?

I have gaps in my knowledge about implementing JS packages in Laravel via laravel-mix and how the functions therein are made available to the browser. I'd like to learn more.

Any help appreciated.

Please sign in or create an account to participate in this conversation.