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?

Have you looked at the contents of your app.js file to see if TomSelect is included in the code? — user697576, Apr 04 '22 at 04:34

score 0 · Accepted Answer · answered May 17 '22 at 08:47

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', {});
});

score 0 · Answer 2 · answered Feb 15 '23 at 09:11

0

Try use:

const TomSelect = require('tom-select')

answered Feb 15 '23 at 09:11

Ripper

49
2

Please explain your answer. Don't just dump code and expect everyone to understand it. – Reza Zare Feb 19 '23 at 16:15

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

2 Answers2