How to import TomSelect in App.js to avoid browser error?

Question

I'm working on a symfony 5.4 application that uses webpack / encore. I want to use the tomselect javascript plugin. i installed it with yarn and want to import it somehow in app.js but it doesn't work.

I tryed this ways in app.js:

TomSelect = window.TomSelect = require('tom-select');

and

import {TomSelect} from 'tom-select'

and

import TomSelect from "tom-select/dist/js/tom-select.complete.min.js";

and I write this in the html.twig files:

{% block javascripts %}
    {{ parent() }}
    <script>
        new TomSelect('select', {});
    </script>
{% endblock %}

I always get the error in browser's javascript console:

Uncaught ReferenceError: TomSelect is not defined

but if I import this way, TomSelect is work:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.0.1/js/tom-select.complete.js"></script>
    <script>
        new TomSelect('select', {});
    </script>

So what should I write in app.js to make tomselect work?

Answer 1

Having the same problem. You need to defer the initialization of your TomSelect object. Your JS code gets executed before your app.js is loaded.

Including TomSelect to your app.js bundle should work how you did it:

window.TomSelect = require('tom-select');

Then, wrap your initialization into a DOMContentLoaded event handler:

document.addEventListener("DOMContentLoaded", function(event) {
  new TomSelect('select', {});
});