TypeError : Cannot read property 'initLazy' of undefined?

Question

I'm a newbie to Vaadin development. try to set up a project for Wildfly. I am using Vaadin 14.1.16 with Wildfly 18 and Java 8. I get an error on the page when I load the page as below.

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

Also, the textArea does not appear on the page.

The comment label is on the right side while I expected to be under the select component. I have already tried on google to find anything related to this issue but nothing onboard.

Vaadin genius, do you have any idea why and how should I solve it?

@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) {

    }
}   

I changed the layout a little bit but I get now these errors.

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

The page screenshot.

Answer 1

After communication with people from Vaadin, they advise me the following:

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.

And I did the following after that problem solved unexpectedly. thanks to all of you for your kind replay.

1- stop wildfly

2- maven:clean

3-vaadin:war

4- restarted server wildfly.

Answer 2

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

The javascript window.Vaadin.Flow.comboBoxConnector.initLazy($0); is called automatically when a ComboBox is attached to the page. There is no need at all to do this yourself.
Even though you say that the method runBeforeClientResponse is never used in your code, please remove it. Because the error message is pretty clear that this line is the culprit of the error.

---

and the Combobox and Textarea don't show up

This could be because you add the same components multiple times into the final layout with this line: wrapper.add(formLayout); (This line is called 3 times in total, so you will have the whole formLayout three times in the editorDiv). Adding the same component instance multiple times never ends well. Change it to this:

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

Remove this line:

ui.getPage().executeJs("window.Vaadin.Flow.comboBoxConnector.initLazy($0);", getElement());