There was an exception while trying to navigate to...

Hi everyone. I just started creating a layout that incudes a treeGrid. After running the program the page works fine. However after reloading the page or close and reopen it I get the following.

java.lang.IllegalStateException: Can’t move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

Any clues? (I saw a post on stack-overflow, but don’t quite understand what is happening)
Best, regards

Scoping problem, what annotation are you using?

@PageTitle(TITLE)
@Route(value = ROUTE, layout = MainLayout.class)
@RolesAllowed(AppPage.NS5_PO_DATA_VIEW)
@Uses(Icon.class)
public class PurchaseOrderDetailsView extends VerticalLayout implements HasUrlParameter {

this is my class

You are probably injecting something / another component? Or are you creating components with the static keyword?

@Override
public void setParameter(BeforeEvent event, String documentId) {
this.poDocumentId = Long.parseLong(documentId);
initializeMainVerticalLayout();
}

here is where it all begins… I am adding components through private methods like initializeMainVerticalLayout() (this contains grids tabsheets etc.). Could you please explain what is happening because I do not understand?

Hard to tell without seeing the code of that method

This error Can’t move a node from one state tree to another is when you are trying to use the same component instance in 2 places in a view (or views).
One example is when you are using the same component instance in multiple rows in a Grid. But it can be tricker and hard to detect (for example if you are using @SpringComponent on a Vaadin component without a Scope annotation.

Components stored in a static variable is another possible cause

I see… Thank you guys I will check everything you mentioned and come back with an update.

Greetings. Fyi, the problem was a static Icon Component declaration as @vital-koala mentioned. Now everything is fine, thank you very much for your help!

Hi everyone. I have encountered the same case at some point. I would like to verify if the “statics” are responsible for this. Here is the case:

I am trying to create a menu using a “public enum AppMenuViewType {}”
each item is initialized like this:

private AppMenuViewType(final String viewName, final Class<? extends Component> viewClass,
final String caption, final Icon icon,
final boolean stateful, final boolean released,
final String parent, final AppMenuViewType children) {
this.viewName = viewName;
this.viewClass = viewClass;
this.caption = caption;
this.icon = icon;
this.stateful = stateful;
this.released = released;
this.parent = parent;
this.children = children;

    this.setAuthorities();

I commented out the lines that used the icon and after refreshing the page I do not get the exception anymore. The icon is a
private Icon icon;.

Is that what causes the error? And if so, is there an explanation?

The class Icon is a component you can’t add a component in 2 places in your view.

Instead of this, you can use VaadinIcon (it’s not a component) and create a new instance each time you need it.
Like vaadinIcon = VaadinIcon.USER
then layout.add(vaadinIcon.create());

At least that’s what I see based on the code you copied (which doesn’t contain the code where you add the icon component)

routerLinks = new HashMap<>();
for (final AppMenuViewType view : AppMenuViewType.values()) {
if (view.hasParent())
continue;

        if (!Util.isEmpty(view.getAuthorities()) && !ud.hasAnyAuthority(view.getAuthorities()))
            continue;

        if (view.hasChildren()){
            HMSubMenu parentList = leftMenu.add(HMSubMenu.get().withCaption(view.getCaption()).withIcon(view.getIcon()));
            for (AppMenuViewType viewSubType : view.getChildren()) {
                if (!Util.isEmpty(viewSubType.getAuthorities()) && !ud.hasAnyAuthority(viewSubType.getAuthorities()))
                    continue;
                Span linkText = new Span(viewSubType.getCaption());
                linkText.getStyle().set("margin-left", "5px");
                Span whiteSpan = new Span(" ");
                Span whiteSpan2 = new Span(" ");
                whiteSpan.setWidth("5px");
                whiteSpan.setHeight("40px");
                whiteSpan2.setWidth("5px");
                viewSubType.getIcon().setSize("14px");

                RouterLink link = new RouterLink(viewSubType.getViewClass());
                link.add(whiteSpan,whiteSpan2,viewSubType.getIcon(), linkText);
                link.getStyle().set("display", "flex");
                link.getStyle().set("align-items", "center");
                link.getStyle().set("font-weight", "500");
                link.getStyle().set("color", "var(--hybridmenu-text-color)");
                link.getStyle().set("font-family", "var(--lumo-font-family)");
                link.getStyle().set("font-size", "var(--lumo-font-size-m)");

                parentList.add(link);
                routerLinks.put(link, parentList);
            }
        }

here is the code that creates the items using the AppMenuViewType enum

You are using the same icon (component ) for everybody, use the VaadinIcon instead

I think I understand now thank you.