Vite: duplicate custom element definition when using Material theme

[web-padawan]

Description of the bug

When using Material theme, the application fails in development mode with the following error:

VM82:6 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-material-styles" has already been used with this registry
    at window.customElements.define (http://localhost:8080/:6:760)
    at http://localhost:8080/VAADIN/@fs/Users/serhii/vaadin/tmp/my-app/node_modules/@vaadin/vaadin-material-styles/version.js?v=3aeb5b09:12:16

Minimal reproducible example

Place this to a new project from https://start.vaadin.com and delete frontend/themes folder.

package com.example.application;

import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.material.Material;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * The entry point of the Spring Boot application.
 *
 * Use the @PWA annotation make the application installable on phones, tablets
 * and some desktop browsers.
 *
 */
@SpringBootApplication
@Theme(themeClass = Material.class)
@PWA(name = "My App", shortName = "My App", offlineResources = {})
@NpmPackage(value = "line-awesome", version = "1.3.0")
@NpmPackage(value = "@vaadin-component-factory/vcf-nav", version = "1.0.6")
public class Application implements AppShellConfigurator {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

Expected behavior

There should not be an error thrown when using Material theme.

Actual behavior

An error is thrown in the console, and the UI does not open. I guess this could be caused by using @vaadin/bundles.

Versions:

- Vaadin / Flow version: 23.2.2
- Java version: 11
- Development or production mode: development mode

[Artur-]

This is related to the bundle. If you delete node_modules/@vaadin/bundles then the app works

[c-t-disher]

Is there any way to make this work with Vaadin 23.2 (23.2.5 as of today)? We'd like to migrate to Vite now, but since we're using the material theme that doesn't seem possible.

[web-padawan]

@c-t-disher You could try to update vite.config.ts as follows to disable dependencies pre-bundling, it seems to help:

import { UserConfigFn } from 'vite';
import { overrideVaadinConfig } from './vite.generated';

const customConfig: UserConfigFn = (env) => ({
  // Here you can add custom Vite parameters
  // https://vitejs.dev/config/
  optimizeDeps: {
    disabled: true,
  },
});

export default overrideVaadinConfig(customConfig);