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

Question

我正在尝试将 breadbutter.io js 文件集成到 vaadin 21 中。

我怀疑问题出在 vaadin 而不是 breadbutter。

我创建了一个 javascript 文件并将其存储在

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>

然后在我的 vaadin 登录页面上注入脚本：


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;

当我尝试加载页面时出现以下错误：

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
>

我在想我可能需要包装标签？

Answer 1

问题出在 .js 文件中的 <script> 标签。 <script> 只能在 HTML 文件中使用，JavaScript 代码就是其中的内容。

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

integrate breadbutter.io into vaadin problems with @JavaScript

javascript

vaadin

breadbutter.io