TypeError : Cannot read property 'initLazy' of undefined?

Question

我是 Vaadin 开发的新手。尝试为 Wildfly 建立一个项目。我将 Vaadin 14.1.16 与 Wildfly 18 和 Java 8 一起使用。当我如下加载页面时，页面出现错误。

(TypeError) : Cannot read property 'initLazy' of undefined

另外，textArea 没有出现在页面上。

comment label 在右侧，而我预计在 select component 下方。我已经尝试在 google 上找到与此问题相关的任何内容，但没有任何内容。

Vaadin 天才，你知道为什么以及我应该如何解决它吗？

@Route(value = "maintenance", layout = MainView.class)
@PageTitle("Maintenance Mode Selector")
public class MaintenanceView extends Div implements AfterNavigationObserver {

    @Inject
    private Maintenance maintenance;
    private ComboBox<MaintenanceMode> operationComboBox = new ComboBox<>(MaintenanceMode.NORMAL_OPERATION.getDescription());
    private Select<String> maintenanceSelector = new Select();
    private TextArea commentTextArea = new TextArea();
    private PasswordField passwordField = new PasswordField();
    private Button btnOperation = new Button("Set Operation Mode");

    public MaintenanceView() {
        setId("maintenance-view");

        operationComboBox.setItemLabelGenerator(MaintenanceMode::getDescription);
        operationComboBox.setItems(MaintenanceMode.values());

        maintenanceSelector.setItems("MAINTENANCE OPERATION", "NORMAL OPERATION");
        maintenanceSelector.getStyle().set("width", "40em");
        maintenanceSelector.setPlaceholder("CHOOSE AN OPERATION");

        commentTextArea.getStyle().set("minHeight", "200em");
        commentTextArea.setPlaceholder("Down time is expected to be 30 minute ...");
        commentTextArea.addThemeVariants(TextAreaVariant.LUMO_SMALL);

        btnOperation.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnOperation.addClickListener(buttonClickEvent -> {
            maintenance.setMode("MAINTENANCE OPERATION".equals(maintenanceSelector.getValue()) ? "1" : "0");
            maintenance.setComment(commentTextArea.getValue());
        });

        SplitLayout splitLayout = new SplitLayout();
        splitLayout.setOrientation(SplitLayout.Orientation.HORIZONTAL);
        splitLayout.setSizeFull();

        createEditorLayout(splitLayout);

        add(splitLayout);
    }


    private void createEditorLayout(SplitLayout splitLayout) {
        FormLayout formLayout = new FormLayout();
        formLayout.setResponsiveSteps(
                new FormLayout.ResponsiveStep("40em",2, FormLayout.ResponsiveStep.LabelsPosition.TOP),
                new FormLayout.ResponsiveStep("40em",1, FormLayout.ResponsiveStep.LabelsPosition.TOP),
                new FormLayout.ResponsiveStep("40em",2, FormLayout.ResponsiveStep.LabelsPosition.TOP),
                new FormLayout.ResponsiveStep("40em",1, FormLayout.ResponsiveStep.LabelsPosition.TOP)
                );

        formLayout.addFormItem( operationComboBox, "Combobox Component:");
        formLayout.addFormItem( maintenanceSelector, "Select Component:");
        formLayout.addFormItem( commentTextArea, "Comments:");
        formLayout.addFormItem( passwordField, "Password:");
        formLayout.addFormItem( btnOperation,"");

        formLayout.setColspan(operationComboBox,2);
        formLayout.setColspan(maintenanceSelector,2);
        formLayout.setColspan(commentTextArea,2);
        formLayout.setColspan(passwordField,2);
        formLayout.setColspan(btnOperation,1);

        splitLayout.addToSecondary(formLayout);
    }

    @Override
    public void afterNavigation(AfterNavigationEvent afterNavigationEvent) {

    }
}

我稍微更改了布局，但现在出现了这些错误。

(TypeError) : Cannot read property 'confirm' of undefined
(TypeError) : Cannot read property 'set' of undefined
(TypeError) : Cannot read property 'updateSize' of undefined

页面截图。

Answer 1

删除这一行：

ui.getPage().executeJs("window.Vaadin.Flow.comboBoxConnector.initLazy([=10=]);", getElement());

Answer 2

(TypeError) : Cannot read property 'initLazy' of undefined

当 ComboBox 附加到页面时，将自动调用 javascript window.Vaadin.Flow.comboBoxConnector.initLazy([=11=]);。完全没有必要自己做。
即使您说 runBeforeClientResponse 方法从未在您的代码中使用过，也请将其删除。因为报错信息已经很明确了，就是这一行导致的错误。

and the Combobox and Textarea don't show up

这可能是因为您使用以下行将相同的组件多次添加到最终布局中：wrapper.add(formLayout);（该行总共调用了 3 次，因此您将在编辑器）。多次添加相同的组件实例永远不会有好结果。改成这样：

private void createEditorLayout(SplitLayout splitLayout) {
    Div editorDiv = new Div();
    editorDiv.setId("maintenance-layout");

    FormLayout formLayout = new FormLayout();
//        addFormItem(editorDiv, formLayout, operationComboBox, "Operation Mode");
    addFormItem(formLayout, maintenanceSelector, "Operation Mode");
    addFormItem(formLayout, commentTextArea, "Comment");
    addFormItem(formLayout, passwordField, "Password");
    editorDiv.add(formLayout);
    editorDiv.add(btnOperation);

    splitLayout.addToSecondary(editorDiv);
}

private void addFormItem(FormLayout formLayout, AbstractField field, String fieldName) {
    formLayout.addFormItem(field, fieldName);
    field.getElement().getClassList().add("full-width");
}

Answer 3

和Vaadin的人交流后，他们给我的建议如下：

Hi! looks like the front-end bundle hasn't updated; 
after adding the combobox to the view, did you restart the app? 
Vaadin needs to run mvn Vaadin:prepare-frontend to include the new component.

在那个问题出人意料地解决后，我做了以下操作。感谢大家的精彩回放。

1- 阻止野蝇

2- maven:clean

3-vaadin:war

4- 重新启动服务器 wildfly。

TypeError : Cannot read property 'initLazy' of undefined?

TypeError : Cannot read property 'initLazy' of undefined?

java

vaadin

wildfly

vaadin-flow