Having trouble integrating the Sparkline JavaScript package into my Laravel 5.8 project using Laravel Mix. The Sparkline isn't displaying, and I'm encountering a browser console error.
Error: Uncaught ReferenceError: sparkline is not defined.
It seems like I'm not calling it correctly.
These are the steps I've followed:
1. Installed the sparkline package using npm
npm install @fnando/sparkline --save-dev
Verified that the package is installed in node_modules (node_modules/@fnando/sparkline)
2. Added an entry to webpack.mix.js file:
mix.js([
'resources/js/app.js',
'node_modules/@fnando/sparkline'
],'public/js');
3. Imported the package in my ./resources/js/app.js:
import sparkline from "@fnando/sparkline"
4. Ran webpack with npm run dev to generate assets: ./public/js/app.js.
5. Referenced these assets in my master layout blade as shown below:
[.. snip ..]
<script src="{{ asset('js/resources.js') }}"></script>
<script src="{{ asset('js/semantic.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script>
$('.ui.dropdown').dropdown();
$('.ui.sticky').sticky({
offset: 50,
context: '#content'
});
@stack('inline_scripts')
</script>
</body>
</html>
6. Attempted to render the sparkline in my blade template as follows:
@extends('layouts.master')
@section('content')
<div class="ui secondary segment">
<h4>Sparklines!</h4>
<div class="ui two column centered grid">
<div class="column">
<svg class="sparkline" width="100" height="30" stroke-width="3"></svg>
</div>
</div>
</div>
@push('inline_scripts')
sparkline.sparkline(document.querySelector(".sparkline"), [1, 5, 2, 4, 8, 3, 7]);
@endpush
@endsection