Issue with VR360 Library Integration in Production Build

General
1

Hi,

I am experiencing a problem that occurs only when compiling the project for production using the command
‘clean package -Pproduction’. Here are the details:

Development Environment: I am using Spring Tool Suite 4, version 4.21.1.
Project Configuration: The project uses Java 21 and Vaadin version 24.4.7.

I added the npm library ‘aframe’ using the annotation
‘@NpmPackage(value = “aframe”, version = “1.6.0”)’ and imported it into a Lit component.
This works fine in development.

However, I encounter an issue during the production build. When accessing the application (both on Chrome and Firefox), the app remains stuck in the loading state without ever completing, and the console does not show any errors.

The same issue occurs if I remove the @NpmPackage annotation and instead import the library directly in the index.html file using:

<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>

Strangely, the same error occurs with the following libraries (used one at a time without aframe):

  • three
  • @photo-sphere-viewer/core
  • panolens

Could you please provide guidance on how to resolve this issue?

Best regards

2

Did you check both the browser console and the server-side console?

3

Yes. No messages in any console.
I am certain that the server-side part in Java is working fine (internal timers are logging correctly)… the problem seems to be related to the client.

We also created a Node project with Vite… installation with npm, compilation with Vite… it works correctly, so it doesn’t seem to be an issue with the libraries or Vite either.

It seems to be an issue during packaging because, as mentioned, the application works perfectly in non-release mode.

4

I tested adding a script tag with aframe.min.js to the index HTML document of a sandbox project that I had close by but production mode still worked after that change.

Could this be triggered by some weird interaction with some other custom JS that is used in your application?

5

While trying to reproduce an example error, we found that it was an issue on our end.

In earlier versions of Vaadin lit decorators are located in ‘lit-element’ however, in more recent versions, these decorators have been moved to ‘lit/decorators.js’.
To improve the porting of components that import lit decorators, and are used in projects with differents versions, we implemented a dynamic import:

async function dinamicImports() {
	console.log("** dinamicImports ");

    let version =  (window as any).MPVaadinVersion;

	const litElementImport = await import('lit-element');
	console.log("**dinamicImports litElementImport ", litElementImport);

	const { LitElement, css, html } = litElementImport;
	// This is printed
	console.log("**dinamicImports { LitElement, css, html } ");

	var decoratorsModule : any = litElementImport;
	if ( version == "someVersion" ) {
		decoratorsModule = await import('lit/decorators.js');
		// This is NOT printed
		console.log("**dinamicImports decoratorsModule ");
	}

	const { customElement, property, query } = decoratorsModule;

	console.log("**dinamicImports return ");
	return { customElement, property, query, LitElement, css, html };
} 

export const { customElement, property, query, LitElement, css, html } = await dinamicImports();

After that, in the various components, we were importing them with the following code:
import { LitElement, css, customElement, html, property, query } from ‘…/VaadinLitAdapter’;

This works perfectly in development, but the reported issue occurs when the project is compiled for production. It fails to resolve the import correctly and remains stuck in a pending state.

Any ideas about this?

6

That does not look like correct way to import lit dependencies to me

You can find a blog post about how to use Lit and Lit decorators here: Create a custom component with Lit | Vaadin

It looks like the library you are trying to use is not going well along with Vite and requires some additional plugin. Vite is the bundler we use to build the frontend bundle.

You can import the aframe.min.js dynamically from the resource folder and use it standard JS library as well. Then I would not recommend to throw Lit into mix.

You could take look TinyMce or PivotTable add-ons in the Directory how to use JavaScript library with Vaadin outside frontend bundle.

7

Thank you for your help. Best regards.