Hi Erik, It is really cool component. Version: Vaadin - 14.4.3 SlideTab

Directory SlideTab
1

Hi Erik,

It is really cool component.

Version:
Vaadin - 14.4.3
SlideTab - 2.2.1

I am getting the below exception,
Caused by: java.lang.IllegalStateException: Couldn’t find the definition of the element with tag ‘slide-tab’ 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

Note: I have frontend folder and have slidtab.js and css in the respective src and styles folder.

Any help would be appreciated to resolve the issue…

Thanks

2

Hi Uvaraj,

I just tried creating a new project with Vaadin 14.4.3 and SlideTab 2.2.1, and it worked for me.

I didn’t do a WAR deployment, but that should not matter.

How are you using the SlideTab? You shouldn’t need to move any JS or CSS files around, just add the dependency to pom.xml and then do, for example, add(new SlideTabBuilder(myContent).build(), and that should work.

3

Thanks Erik for your response.

I am using Spring boot and creating JAR. It is working fine in local if I have the slide-tab.js in the proper location but when we deploy in the AWS ECS, we are getting the "java.lang.IllegalStateException: Couldn’t find the definition of the element with tag ‘slide-tab’ in any template file declared using ‘@JsModule’ annotations. "

My assumption is slide-tab.js file somehow not properly bundled.

The issue can be reproduced in local, just re-naming the js file.

Please find the attachment for details.

18577427.png
18577430.png

4

One More observation is, the slide-js inside the frontend folder works if I am executing directly from IDE.

If I am trying to execute as bundled JAR file then error occurred.

java -jar component.jar

5

You shouldn’t have to put the slide-tab.js file in your /frontend folder. Just adding the dependency to your pom.xml should be enough.

6

Hi Erik,

No luck … still same error after deleting the slide-tab.js file in the frontend folder.

7

For me it works also when executing as a JAR (java -jar ...). Both in development and in production mode.

Do you have any other CSS or JS file that you use in your application? If so, do they always work?

How about if you check the target/frontend/generated-flow-imports.js file, can you find import '@vaadin/flow-frontend/src/slide-tab.js'; there?

And in /node_modules/@vaadin/flow-frontend/src, is there a slide-tab.js?

8

/node_modules/@vaadin/flow-frontend/src, is there a slide-tab.js - YES

target/frontend/generated-flow-imports.js file, can you find import ‘@vaadin/flow-frontend/src/slide-tab.js’; - YES

We are using the customized webpack.config.js as per the attachement. will it cause any issue?

18577541.js (2.47 KB)

9

I believe that’s the issue, yes. I did get a similar result when running with that configuration. I am not too well versed in Webpack configs, so I can’t say how to solve it.

10

Thanks Erik, we do have others add-ons as part of our project. but not sure why only slide tab causing the mentioned issue even though webpack.config.js is customized…

	<dependency>
		<groupId>org.vaadin.stefan</groupId>
		<artifactId>lazy-download-button</artifactId>
		<version>1.0.0</version>
	</dependency>

	<dependency>
		<groupId>org.vaadin.gatanaso</groupId>
		<artifactId>multiselect-combo-box-flow</artifactId>
		<version>2.5.0</version>
	</dependency>

	<dependency>
		<groupId>org.vaadin.erik</groupId>
		<artifactId>slidetab</artifactId>
		<version>2.2.1</version>
	</dependency>

	<dependency>
		<groupId>com.vaadin.componentfactory</groupId>
		<artifactId>multi-combo-box-flow</artifactId>
		<version>0.2.0</version>
	</dependency>

	<dependency>
		<groupId>com.vaadin.componentfactory</groupId>
		<artifactId>multiple-select</artifactId>
		<version>1.0.1</version>
	</dependency>
11

I did have other problems with your Webpack configuration too, so it’s possible it failed for me because of some other reason. But I did get the error about not finding slide-tab.

Do you have the slide-tab in your filtered Flow imports?

12

Do you have the slide-tab in your filtered Flow imports?

NO, it is not. Not only slide-tab, no other components JS import found in the filtered.js.

13

Sorry, I am out of ideas. If at all possible, try running with a normal Webpack config, or then don’t filter out @vaadin/flow-frontend/src/slide-tab.js and see if it helps.

I think if you put a console.log(...) in the Webpack config and run npx webpack you could see if it filters out the JS files of the other add-ons you are using, too.