Estoy tratando de integrar el archivo breadbutter.io js en vaadin 21.

Sospecho que el problema es con Vaadin en lugar de con mantequilla de pan.

Creé un archivo javascript y lo almacené en

frontend/js/breadbutter.js

 <script> window.initBreadButter = function() { BreadButter.configure({ app_id: "XXXXXXX" }); }; (function(d, s, id){ var js,fjs=d.getElementsByTagName(s)[0]; if(d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = 'https://cdn.breadbutter.io/dist/breadbutter.5.5.0.462.min.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'breadbutter-js')); </script>

En mi página de inicio de sesión de vaadin, inyecto el script:

 import java.net.URISyntaxException; import java.security.InvalidKeyException; import java.security.NoSuchAlgorithmException; import javax.crypto.BadPaddingException; import javax.crypto.IllegalBlockSizeException; import javax.crypto.NoSuchPaddingException; import org.apache.commons.mail.EmailException; import org.apache.logging.log4j.LogManager; import org.apache.logging.log4j.Logger; import com.vaadin.flow.component.Key; import com.vaadin.flow.component.UI; import com.vaadin.flow.component.button.Button; import com.vaadin.flow.component.button.ButtonVariant; import com.vaadin.flow.component.dependency.JavaScript; import com.vaadin.flow.component.formlayout.FormLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.textfield.PasswordField; import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.router.AfterNavigationEvent; import com.vaadin.flow.router.AfterNavigationObserver; import com.vaadin.flow.router.BeforeEnterEvent; import com.vaadin.flow.router.BeforeEnterListener; import com.vaadin.flow.router.Route; @Access(permits = { UserRole.All }) @Route(value = "Login", layout = PublicAdminLayout.class) @JavaScript("/js/breadbutter.js") public class LoginView extends VerticalLayout implements PublicView, AfterNavigationObserver, BeforeEnterListener { public static final String NAME = "Login"; private TextField usernameField; private PasswordField passwordField;

Cuando intento cargar la página me sale el siguiente error:

 Webpack Error Close [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:42901/ [webpack-dev-server] On Your Network (IPv4): http://192.168.86.41:42901/ [webpack-dev-server] Content not from webpack is served from '..../target/classes/META-INF/VAADIN/webapp, ..../src/main/webapp' directory ERROR in ./js/breadbutter.js 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders >

¿Estoy pensando que podría necesitar envolver las etiquetas?