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?

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?