使用@JavaScript 将breadbutter.io 集成到vaadin 问题中

Question

I'm trying to integrate the breadbutter.io js file into vaadin 21.

I suspect the problem is with vaadin rather than breadbutter.

I've created a javascript file and stored it in

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>

On my vaadin login page I then inject the 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;

When I try to load the page I'm getting the following 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
> 

I'm thinking that I may need to wrap the tags?

Answer 1

The issue is the <script> tags in the.js file. A <script> should only be used in a HTML file, the JavaScript code is what's inside them.