Vaadin java Class will not start

Yesterday I took a class for login into a web application from this forum for testing.

I use the Vaadin designer for making a single page webapplication. A User should login and will transfer to the site wich i´ve create with the designer. at the Moment there is no java connection for the Webapp and my only goal is to transfer from log in to the MainView page.

Today I tried it again and it doesn’t work anymore. I´ve done nothing on the JAVA side only expand the designer file. here is the Code

package com.example;


import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.login.AbstractLogin;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.server.VaadinSession;

import java.util.Objects;
import java.util.Optional;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        this.display();
    }

    private void display ( )
    {
        if ( Objects.isNull( VaadinSession.getCurrent().getAttribute( User.class ) ) )
        {
            this.removeAll();
            this.add( this.makeLoginForm() );
        } else
        { // Else we have a User, so must be authenticated.
            this.removeAll();
            this.add( new MyContentView() );
        }
    }

    private LoginForm makeLoginForm ( )
    {
        Authenticator authenticator = new Authenticator();
        LoginForm component = new LoginForm();
        component.addLoginListener( ( AbstractLogin.LoginEvent loginEvent ) -> {
            Optional < User > user = authenticator.authenticate( loginEvent.getUsername() , loginEvent.getPassword() );
            if ( user.isPresent() )
            {
                VaadinSession.getCurrent().setAttribute( User.class , user.get() );
                this.display();
            } else
            {
                component.setError( true );
            }
        } );
        return component;
    }
package com.example;

import com.vaadin.flow.component.accordion.Accordion;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.polymertemplate.Id;
import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;

/**
 * A Designer generated component for the my-content-view template.
 *
 * Designer will add and remove fields with @Id mappings but
 * does not overwrite or otherwise change this file.
 */
@Tag("my-content-view")
@JsModule("./my-content-view.js")
public class MyContentView extends PolymerTemplate<MyContentView.MyContentViewModel> {

    @Id("vaadinAccordion")
    private Accordion vaadinAccordion;
    @Id("label")
    private Label label;
    @Id("label1")
    private Label label1;
    @Id("birthday")
    private DatePicker birthday;
    @Id("vaadinButton")
    private Button vaadinButton;


    /**
     * Creates a new MyContentView.
     */
    public MyContentView() {
        // You can initialise any data required for the connected UI components here.
    }

    /**
     * This model binds properties between MyContentView and my-content-view
     */
    public interface MyContentViewModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}

This is the error Massage after login and update the site

There was an exception while trying to navigate to '' with the exception message 'Error creating bean with name 'com.example.MainView': Instantiation of bean failed; 
nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.example.MainView]
: Constructor threw exception; 
nested exception is java.lang.IllegalStateException: There is no element with id='vaadinAccordion' in the template file './my-content-view.js'. Cannot map it using @Id'
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'com.example.MainView': Instantiation of bean failed; 
nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.example.MainView]
: Constructor threw exception; 
nested exception is java.lang.IllegalStateException: There is no element with id='vaadinAccordion' in the template file './my-content-view.js'. Cannot map it using @Id
    at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.instantiateBean(AbstractAutowireCapableBeanFactory.java:1320)
    at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBeanInstance(AbstractAutowireCapableBeanFactory.java:1214)
    at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:557)
    at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:517)
    at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:307)
    at com.vaadin.flow.spring.SpringInstantiator.getOrCreate(SpringInstantiator.java:117)
    at com.vaadin.flow.di.Instantiator.createRouteTarget(Instantiator.java:160)
    at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.lambda$getRouteTarget$1(AbstractNavigationStateRenderer.java:133)
    at java.base/java.util.Optional.orElseGet(Optional.java:369)
    at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.getRouteTarget(AbstractNavigationStateRenderer.java:132)
    at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.sendBeforeEnterEventAndPopulateChain(AbstractNavigationStateRenderer.java:498)
    at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.createChainIfEmptyAndExecuteBeforeEnterNavigation(AbstractNavigationStateRenderer.java:477)
    at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.handle(AbstractNavigationStateRenderer.java:228)
    at com.vaadin.flow.router.Router.handleNavigation(Router.java:249)
    at com.vaadin.flow.router.Router.navigate(Router.java:220)
    at com.vaadin.flow.router.Router.navigate(Router.java:186)
    at com.vaadin.flow.router.Router.initializeUI(Router.java:93)
    at com.vaadin.flow.server.BootstrapHandler.createAndInitUI(BootstrapHandler.java:1516)
    at com.vaadin.flow.server.BootstrapHandler.synchronizedHandleRequest(BootstrapHandler.java:472)
    at com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:40)
    at com.vaadin.flow.server.VaadinService.handleRequest(VaadinService.java:1545)
    at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:247)
    at com.vaadin.flow.spring.SpringServlet.service(SpringServlet.java:120)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:712)
    at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:459)
    at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:352)
    at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:312)
    at org.springframework.web.servlet.mvc.ServletForwardingController.handleRequestInternal(ServletForwardingController.java:141)
    at org.springframework.web.servlet.mvc.AbstractController.handleRequest(AbstractController.java:177)
    at org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter.handle(SimpleControllerHandlerAdapter.java:52)
    at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1040)
    at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:943)
    at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006)
    at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:898)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:634)
    at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:119)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
    at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:526)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
    at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408)
    at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
    at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:861)
    at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1579)
    at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
    at java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)
    at java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)
    at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
    at java.base/java.lang.Thread.run(Thread.java:834)
Caused by: org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.example.MainView]
: Constructor threw exception; nested exception is java.lang.IllegalStateException: There is no element with id='vaadinAccordion' in the template file './my-content-view.js'. Cannot map it using @Id
    at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:213)
    at org.springframework.beans.factory.support.SimpleInstantiationStrategy.instantiate(SimpleInstantiationStrategy.java:87)
    at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.instantiateBean(AbstractAutowireCapableBeanFactory.java:1312)
    ... 72 more
Caused by: java.lang.IllegalStateException: There is no element with id='vaadinAccordion' in the template file './my-content-view.js'. Cannot map it using @Id
    at com.vaadin.flow.component.polymertemplate.IdCollector.collectedInjectedId(IdCollector.java:106)
    at com.vaadin.flow.component.polymertemplate.IdCollector.lambda$collectInjectedIds$1(IdCollector.java:78)
    at java.base/java.util.stream.ForEachOps$ForEachOp$OfRef.accept(ForEachOps.java:183)
    at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:177)
    at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:948)
    at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:484)
    at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:474)
    at java.base/java.util.stream.ForEachOps$ForEachOp.evaluateSequential(ForEachOps.java:150)
    at java.base/java.util.stream.ForEachOps$ForEachOp$OfRef.evaluateSequential(ForEachOps.java:173)
    at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234)
    at java.base/java.util.stream.ReferencePipeline.forEach(ReferencePipeline.java:497)
    at com.vaadin.flow.component.polymertemplate.IdCollector.collectInjectedIds(IdCollector.java:78)
    at com.vaadin.flow.component.polymertemplate.IdCollector.collectInjectedIds(IdCollector.java:67)
    at com.vaadin.flow.component.polymertemplate.TemplateDataAnalyzer.parseTemplate(TemplateDataAnalyzer.java:215)
    at com.vaadin.flow.component.polymertemplate.TemplateInitializer.<init>(TemplateInitializer.java:91)
    at com.vaadin.flow.component.polymertemplate.PolymerTemplate.<init>(PolymerTemplate.java:88)
    at com.vaadin.flow.component.polymertemplate.PolymerTemplate.<init>(PolymerTemplate.java:103)
    at com.example.MyContentView.<init>(MyContentView.java:38)
    at com.example.MainView.display(MainView.java:38)
    at com.example.MainView.<init>(MainView.java:26)
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:490)
    at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:200)
    ... 74 more
import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-button/src/vaadin-button.js';
import '@vaadin/vaadin-charts/src/vaadin-chart.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-horizontal-layout.js';
import '@vaadin/vaadin-date-picker/src/vaadin-date-picker.js';
import '@vaadin/vaadin-accordion/src/vaadin-accordion.js';

class MyContentView extends PolymerElement {

    static get template() {
        return html`
<style include="shared-styles">
                :host {
                    display: block;
                    height: 100%;
                }
            </style>
<vaadin-horizontal-layout style="width: 100%; height: 100%;">
 <vaadin-vertical-layout class="sidebar" style="flex-basis: calc(7*var(--lumo-size-s)); flex-shrink: 0; background-color: var(--lumo-contrast-5pct);">
  <vaadin-vertical-layout theme="spacing" style="flex-grow: 1; align-self: stretch;">
   <vaadin-vertical-layout theme="spacing" style="flex-grow: 1; align-self: stretch;">
    <vaadin-button>
      Button 
    </vaadin-button>
   </vaadin-vertical-layout>
   <vaadin-vertical-layout theme="spacing" style="flex-grow: 1; align-self: stretch;">
    <vaadin-button theme="primary">
      Primary 
    </vaadin-button>
   </vaadin-vertical-layout>
  </vaadin-vertical-layout>
  <vaadin-vertical-layout theme="spacing" style="flex-grow: 1; align-self: stretch;">
   <vaadin-button id="vaadinButton">
     Button 
   </vaadin-button>
   <vaadin-accordion></vaadin-accordion>
  </vaadin-vertical-layout>
 </vaadin-vertical-layout>
 <vaadin-vertical-layout class="content" style="flex-grow: 1; flex-shrink: 1; flex-basis: auto;">
  <vaadin-vertical-layout theme="spacing" style="align-self: stretch; height: 20%;">
   <vaadin-chart type="pie" title="Browser market shares in January, 2018" tooltip="">
    <vaadin-chart-series title="Brands" values="[[&quot;Chrome&quot;,61.41]
,[&quot;Internet Explorer&quot;,11.84]
,[&quot;Firefox&quot;,10.85]
,[&quot;Edge&quot;,4.67]
,[&quot;Safari&quot;,4.18]
,[&quot;Sogou Explorer&quot;,1.64]
,[&quot;Opera&quot;,1.6]
,[&quot;QQ&quot;,1.2]
,[&quot;Other&quot;,2.61]
]"></vaadin-chart-series>
   </vaadin-chart>
  </vaadin-vertical-layout>
  <vaadin-vertical-layout theme="spacing" style="align-self: stretch; flex-grow: 1;">
   <vaadin-horizontal-layout theme="spacing" style="flex-grow: 1; height: 100%; align-self: stretch;">
    <vaadin-vertical-layout theme="spacing" style="width: 30%;">
     <vaadin-vertical-layout theme="margin" style="height: 50%; align-self: stretch; width: 100%; padding: var(--lumo-space-m);">
      <label id="label1">Neuigkeiten - Letzter Monat</label>
     </vaadin-vertical-layout>
     <vaadin-vertical-layout theme="margin" style="height: 50%; align-self: stretch; flex-grow: 0; width: 100%; padding: var(--lumo-space-m);"></vaadin-vertical-layout>
    </vaadin-vertical-layout>
    <vaadin-vertical-layout theme="spacing" style="width: 100%;">
     <vaadin-vertical-layout style="width: 100%; height: 50%;">
      <label id="label">Meine Kurse</label>
     </vaadin-vertical-layout>
     <vaadin-vertical-layout style="width: 100%; height: 50%;"></vaadin-vertical-layout>
    </vaadin-vertical-layout>
    <vaadin-vertical-layout theme="spacing" style="width: 30%;">
     <vaadin-vertical-layout theme="spacing" style="width: 100%; height: 50%; padding: var(--lumo-space-m);">
      <label>Mail</label>
     </vaadin-vertical-layout>
     <vaadin-vertical-layout theme="spacing" style="width: 100%; height: 50%; padding: var(--lumo-space-m);">
      <vaadin-date-picker label="Datum" placeholder="Pick a date" id="birthday">
        Datum 
      </vaadin-date-picker>
     </vaadin-vertical-layout>
    </vaadin-vertical-layout>
   </vaadin-horizontal-layout>
  </vaadin-vertical-layout>
 </vaadin-vertical-layout>
</vaadin-horizontal-layout>
`;
    }

    static get is() {
        return 'my-content-view';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(MyContentView.is, MyContentView);

The error message says:

There is no element with id='vaadinAccordion' in the template file './my-content-view.js'. Cannot map it using @Id

This seems to be correct; in the Java class MyContentView, I see the following:

    @Id("vaadinAccordion")
    private Accordion vaadinAccordion;

which requires an element with id="vaadinAccordion" in the template to work. In the /my-content-view.js template, I see one use of the vaadin-accordion element with no id:

   </vaadin-button>
   <vaadin-accordion></vaadin-accordion>
   </vaadin-vertical-layout>

So the <vaadin-accordion> tag is missing an id="vaadinAccordion" attribute for the @Id("vaadinAccordion") mapping to work. In other words, either add the id attribute in the .js template or remove the @Id mapping in the Java file.

-Olli