Estoy trabajando en una aplicación Symfony 5.4 que usa webpack/encore. Quiero usar el complemento javascript de tomselect . lo instalé con yarn y quiero importarlo de alguna manera en app.js pero no funciona.
Intenté de esta manera en app.js:
TomSelect = window.TomSelect = require('tom-select');y
import {TomSelect} from 'tom-select'y
import TomSelect from "tom-select/dist/js/tom-select.complete.min.js";y escribo esto en los archivos html.twig:
{% block javascripts %} {{ parent() }} <script> new TomSelect('select', {}); </script> {% endblock %}Siempre recibo el error en la consola javascript del navegador:
Error de referencia no capturado: TomSelect no está definido
pero si importo de esta manera, TomSelect funciona:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.0.1/js/tom-select.complete.js"></script> <script> new TomSelect('select', {}); </script>Entonces, ¿qué debo escribir en app.js para que tomselect funcione?
Tener el mismo problema. Debe diferir la inicialización de su objeto TomSelect. Su código JS se ejecuta antes de que se cargue su app.js.
Incluir TomSelect en su paquete app.js debería funcionar como lo hizo:
window.TomSelect = require('tom-select');Luego, envuelva su inicialización en un controlador de eventos DOMContentLoaded:
document.addEventListener("DOMContentLoaded", function(event) { new TomSelect('select', {}); });