Eclipse Vaadin designer 10+ html template

Question

I am trying to learn Vaadin in version 14. For this purpose, I installed the Vaadin designer plugin for Eclipse. Everything worked until I tried to start the server and test the first page.

I started getting these errors:

There was an exception while trying to navigate to '' with the exception message 'Error creating bean with name 'com.project.gym.vaadin.MainPageDesign': Instantiation of bean failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.project.gym.vaadin.MainPageDesign]: Constructor threw exception; nested exception is java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file'
    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'com.project.gym.vaadin.MainPageDesign': Instantiation of bean failed; nested exception is org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.project.gym.vaadin.MainPageDesign]: Constructor threw exception; nested exception is java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file
        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:158)
        at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.lambda$getRouteTarget$1(AbstractNavigationStateRenderer.java:127)
        at java.util.Optional.orElseGet(Optional.java:267)
        at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.getRouteTarget(AbstractNavigationStateRenderer.java:126)
        at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.createChain(AbstractNavigationStateRenderer.java:314)
        at com.vaadin.flow.router.internal.AbstractNavigationStateRenderer.handle(AbstractNavigationStateRenderer.java:195)
        at com.vaadin.flow.router.Router.handleNavigation(Router.java:223)
        at com.vaadin.flow.router.Router.navigate(Router.java:194)
        at com.vaadin.flow.router.Router.initializeUI(Router.java:92)
        at com.vaadin.flow.server.BootstrapHandler.createAndInitUI(BootstrapHandler.java:1489)
        at com.vaadin.flow.server.BootstrapHandler.synchronizedHandleRequest(BootstrapHandler.java:459)
        at com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:40)
        at com.vaadin.flow.server.VaadinService.handleRequest(VaadinService.java:1540)
        at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:247)
        at com.vaadin.flow.spring.SpringServlet.service(SpringServlet.java:95)
        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:541)
        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:367)
        at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)
        at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:860)
        at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1598)
        at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
        at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
        at java.lang.Thread.run(Thread.java:748)
    Caused by: org.springframework.beans.BeanInstantiationException: Failed to instantiate [com.project.gym.vaadin.MainPageDesign]: Constructor threw exception; nested exception is java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file
        at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:216)
        at org.springframework.beans.factory.support.SimpleInstantiationStrategy.instantiate(SimpleInstantiationStrategy.java:87)
        at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.instantiateBean(AbstractAutowireCapableBeanFactory.java:1312)
        ... 70 more
    Caused by: java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file
        at com.vaadin.flow.component.polymertemplate.NpmTemplateParser.getTemplateContent(NpmTemplateParser.java:140)
        at com.vaadin.flow.component.polymertemplate.TemplateDataAnalyzer.parseTemplate(TemplateDataAnalyzer.java:200)
        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.project.gym.vaadin.MainPageDesign.<init>(MainPageDesign.java:31)
        at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
        at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
        at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
        at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
        at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:203)
        ... 72 more

From what I understand, my design is in the wrong place. I tried it in the webapp / frontend, frontend and template directories and in the directory with the .java file. The same error always appeared. Hence my question, where should I put my designs?

Screen of my directory:

Design:

<link rel="import" href="polymer.html">
<link rel="import" href="../../../../../bower_components/vaadin-button/src/vaadin-button.html">



<dom-module id="main-page-design">
    <template>
<style include="shared-styles">
            :host {
                display: block;
                height: 100%;
            }
        </style>
<div id="div" style="width: 100%; height: 100%;">
 <vaadin-button id="loginButton"></vaadin-button>
</div>
</template>

    <script>
        class MainPageDesign extends Polymer.Element {
            static get is() {
                return 'main-page-design';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }
        }
        customElements.define(MainPageDesign.is, MainPageDesign);
    </script>
</dom-module>

Design .java file:

package com.project.gym.vaadin;

import com.vaadin.flow.templatemodel.TemplateModel;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.polymertemplate.PolymerTemplate;
import com.vaadin.flow.dom.Element;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.component.polymertemplate.Id;
import com.vaadin.flow.component.button.Button;

/**
 * A Designer generated component for the main-page-design template.
 *
 * Designer will add and remove fields with @Id mappings but
 * does not overwrite or otherwise change this file.
 */
@Route("")
@Tag("main-page-design")
@HtmlImport("context://src/main/resources/frontend/main-page-design.html")
public class MainPageDesign extends PolymerTemplate<MainPageDesign.MainPageDesignModel> {

    @Id("div")
    private Element div;
    @Id("loginButton")
    private Button loginButton;

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

    /**
     * This model binds properties between MainPageDesign and main-page-design
     */
    public interface MainPageDesignModel extends TemplateModel {
        // Add setters and getters for template properties here.
    }
}

Answer 1

Are you using Vaadin in a compatibility mode? In your error it states

Couldn't find the definition of the element with tag 'main-page-design' in any template file declared using @JsModule annotations.

So I assume you don't. In this case you should import your templates using @JsModule and template is in itself a .js file.

It seems you have used an example from the V13 version. Vaadin 14 has moved to Polymer 3 (it was Polymer 2 before) and syntax has changed between the versions.

But you are also correct, that files should be placed in another directory. You should use a /frontend directory which is under the root of the project. There is a good overview on all type of resources here: Ways of importing

Documentation on creating a component using template API could be found here: Creating a Simple Component Using the Template API