Highcharts not defined

[truckee]

In a Symfony 4.2 application using webpack, attempts to include highcharts resulted in a javascript error Highcharts not defined where the page source reads var linechart = new Highcharts.Chart({.

My eventual solution looked like this:

• install highcharts with yarn add highcharts

• copy .../node_modules/highcharts/highcharts.js to .../assets/js/

• create .../assets/js/shim.js containing

const Highcharts = require('highcharts/highcharts');
window.Highcharts = Highcharts;

add to .../webpack.config.js

.addEntry('shim',  './assets/js/shim.js')
.addEntry('highcharts',  './assets/js/highcharts.js')

and the template includes:

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('shim') }}
    {{ encore_entry_script_tags('highcharts') }}
    <script type="text/javascript">
        {{ chart(chart) }}
    </script>
{% endblock javascripts %}

While this worked for my simple column chart requirement I suspect that a more robust solution is required for complex applications of highcharts.