webpackvaadinnode-modulesvitevaadin23

Vaadin 23.2.0: Module not found: Error: Can't resolve '@vaadin/combo-box/src/vaadin-combo-box-dropdown.js'


I was previously using Vaadin 23.1.1 and upgraded to Vaadin 23.2.0 to be able to use the Confirm Dialog for free. Now I get some random errors when starting my application.

It doesnt matter if I am using Vite or Webpack the Error is basically the same:

Vite:

[0m2023-02-28 20:15:16.829  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2023-02-28 20:15:16.831  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   ➜  Local:   http://127.0.0.1:54326/VAADIN/
2023-02-28 20:15:16.830  INFO 14164 --- [onPool-worker-1] c.v.b.devserver.AbstractDevServerRunner  : Started Vite. Time: 9692ms
2023-02-28 20:15:22.369  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 20:15:22 [vite] ✨ new dependencies optimized: @polymer/iron-list/iron-list.js, @vaadin-component-factory/vcf-enhanced-dialog, @vaadin-component-factory/vcf-lookup-field, @vaadin-component-factory/vcf-tooltip/src/vcf-tooltip.js, @vaadin/common-frontend/ConnectionIndicator.js, ...and 29 more
2023-02-28 20:15:22.880  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2023-02-28 20:15:22.880  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [TypeScript] Found 0 errors. Watching for file changes.
2023-02-28 20:15:29.279  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Failed to resolve import "@vaadin/combo-box/src/vaadin-combo-box-dropdown.js" from "node_modules\multiselect-combo-box\theme\lumo\multiselect-combo-box.js". Does the file exist?
2023-02-28 20:15:30.821  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 20:15:30 [vite] Internal server error: Failed to resolve import "@vaadin/combo-box/src/vaadin-combo-box-dropdown.js" from "node_modules\multiselect-combo-box\theme\lumo\multiselect-combo-box.js". Does the file exist?
2023-02-28 20:15:30.821  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   Plugin: vite:import-analysis
2023-02-28 20:15:30.821  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   File: C:/eclipse/workspace/briefmarken/node_modules/.vite/deps/multiselect-combo-box_theme_lumo_multiselect-combo-box__js.js?v=5611c6ea
2023-02-28 20:15:30.821  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   243|  // node_modules/multiselect-combo-box/src/multiselect-combo-box-dropdown.js
2023-02-28 20:15:30.822  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   244|  import { html as html2 } from "@polymer/polymer/lib/utils/html-tag.js";
2023-02-28 20:15:30.822  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   245|  import { ComboBoxDropdown } from "@vaadin/combo-box/src/vaadin-combo-box-dropdown.js";
2023-02-28 20:15:30.822  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :      |                                    ^
2023-02-28 20:15:30.822  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   246|  var MultiselectComboBoxDropdown = class extends ComboBoxDropdown {
2023-02-28 20:15:30.822  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   247|    static get is() {
2023-02-28 20:15:30.823  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :       at formatError (file:///C:/eclipse/workspace/briefmarken/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35330:46)
2023-02-28 20:15:30.823  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :       at TransformContext.error (file:///C:/eclipse/workspace/briefmarken/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35326:19)
2023-02-28 20:15:30.823  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :       at normalizeUrl (file:///C:/eclipse/workspace/briefmarken/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40255:33)
2023-02-28 20:15:30.823  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :       at async TransformContext.transform (file:///C:/eclipse/workspace/briefmarken/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40389:47)
2023-02-28 20:15:30.824  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :       at async Object.transform (file:///C:/eclipse/workspace/briefmarken/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35579:30)
2023-02-28 20:15:30.824  INFO 14164 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   :       at async loadAndTransform (file:///C:/eclipse/workspace/briefmarken/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:39888:29)

Webpack:

[0m2023-02-28 20:22:37.198  INFO 19988 --- [onPool-worker-1] c.v.b.devserver.AbstractDevServerRunner  : Started Webpack. Time: 44542ms
2023-02-28 20:22:37.485  INFO 19988 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : No issues found.
2023-02-28 20:22:38.740  INFO 19988 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
2023-02-28 20:22:38.763  INFO 19988 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [webpack-dev-middleware] wait until bundle finished: /index.html
2023-02-28 20:22:41.546  INFO 19988 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2023-02-28 20:22:41.546  INFO 19988 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : ERROR in ../node_modules/multiselect-combo-box/src/multiselect-combo-box-dropdown.js
2023-02-28 20:22:41.546  INFO 19988 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : Module not found: Error: Can't resolve '@vaadin/combo-box/src/vaadin-combo-box-dropdown.js' in 'C:\eclipse\workspace\briefmarken\node_modules\multiselect-combo-box\src'
2023-02-28 20:22:41.566  INFO 19988 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [build-status] 1 error and 0 warnings were reported.
2023-02-28 20:22:41.567  INFO 19988 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [build-status] : Failed to compile.

The file described in the errors does in fact not exist:

enter image description here

And here's the pom.xml of my project:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <!-- Project from https://start.vaadin.com/project/6b517997-26c1-43a9-a209-446163c05795 -->
    <groupId>com.marcobsidian.briefmarken</groupId>
    <artifactId>briefmarken</artifactId>
    <name>briefmarken</name>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <properties>
        <java.version>17</java.version>
        <vaadin.version>23.2.0</vaadin.version>
        <selenium.version>4.1.2</selenium.version>
    </properties>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.8</version>
    </parent>

    <repositories>
        <!-- The order of definitions matters. Explicitly defining central here to make sure it has the highest priority. -->

        <!-- Main Maven repository -->
        <repository>
            <id>central</id>
            <url>https://repo.maven.apache.org/maven2</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
        <repository>
            <id>vaadin-prereleases</id>
            <url>
                https://maven.vaadin.com/vaadin-prereleases/
            </url>
        </repository>
        <!-- Repository used by many Vaadin add-ons -->
        <repository>
            <id>Vaadin Directory</id>
            <url>https://maven.vaadin.com/vaadin-addons</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

    <pluginRepositories>
        <!-- The order of definitions matters. Explicitly defining central here to make sure it has the highest priority. -->
        <pluginRepository>
            <id>central</id>
            <url>https://repo.maven.apache.org/maven2</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </pluginRepository>
        <pluginRepository>
            <id>vaadin-prereleases</id>
            <url>
                https://maven.vaadin.com/vaadin-prereleases/
            </url>
        </pluginRepository>
    </pluginRepositories>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>${vaadin.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <!-- Replace artifactId with vaadin-core to use only free components -->
            <artifactId>vaadin-core</artifactId>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.vaadin.stefan</groupId>
            <artifactId>html-table</artifactId>
            <version>1.2.0</version>
        </dependency>
        <dependency>
            <groupId>com.vaadin.componentfactory</groupId>
            <artifactId>lookup-field-flow</artifactId>
            <version>23.1.3</version>
        </dependency>
        <dependency>
            <groupId>com.vaadin.componentfactory</groupId>
            <artifactId>tooltip</artifactId>
            <version>2.0.3</version>
        </dependency>
        <dependency>
            <groupId>com.infraleap</groupId>
            <artifactId>animate-css</artifactId>
            <version>2.0.2</version>
        </dependency>
        <dependency>
            <groupId>org.vaadin.olli</groupId>
            <artifactId>fullscreen</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-testbench</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>5.6.0.Final</version>
        </dependency>
        <dependency>
    <groupId>com.microsoft.sqlserver</groupId>
    <artifactId>mssql-jdbc</artifactId>
    <version>9.4.1.jre11</version>
</dependency>
        <dependency>
            <groupId>org.reflections</groupId>
            <artifactId>reflections</artifactId>
            <version>0.10.2</version>
        </dependency>

        <!-- API, java.xml.bind module -->
<dependency>
    <groupId>jakarta.xml.bind</groupId>
    <artifactId>jakarta.xml.bind-api</artifactId>
    <version>2.3.3</version>
</dependency>

<!-- Runtime, com.sun.xml.bind module -->
<dependency>
    <groupId>org.glassfish.jaxb</groupId>
    <artifactId>jaxb-runtime</artifactId>
    <version>2.3.3</version>
</dependency>

        <!-- Include JUnit 4 support for TestBench and others -->
        <dependency>
            <groupId>org.junit.vintage</groupId>
            <artifactId>junit-vintage-engine</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.hamcrest</groupId>
                    <artifactId>hamcrest-core</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>io.github.bonigarcia</groupId>
            <artifactId>webdrivermanager</artifactId>
            <version>5.1.1</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <defaultGoal>spring-boot:run</defaultGoal>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <!-- Clean build and startup time for Vaadin apps sometimes may exceed
                     the default Spring Boot's 30sec timeout.  -->
                <configuration>
                    <jvmArguments>-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5070</jvmArguments>
                    <wait>500</wait>
                    <maxAttempts>240</maxAttempts>
                </configuration>
            </plugin>

            <!--
                Take care of synchronizing java dependencies and imports in
                package.json and main.js files.
                It also creates webpack.config.js if not exists yet.
            -->
            <plugin>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-maven-plugin</artifactId>
                <version>${vaadin.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>prepare-frontend</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

    <profiles>
        <profile>
            <!-- Production mode is activated using -Pproduction -->
            <id>production</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-maven-plugin</artifactId>
                        <version>${vaadin.version}</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>build-frontend</goal>
                                </goals>
                                <phase>compile</phase>
                            </execution>
                        </executions>
                        <configuration>
                            <productionMode>true</productionMode>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>

        <profile>
            <id>it</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-maven-plugin</artifactId>
                        <executions>
                            <execution>
                                <id>start-spring-boot</id>
                                <phase>pre-integration-test</phase>
                                <goals>
                                    <goal>start</goal>
                                </goals>
                            </execution>
                            <execution>
                                <id>stop-spring-boot</id>
                                <phase>post-integration-test</phase>
                                <goals>
                                    <goal>stop</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>

                    <!-- Runs the integration tests (*IT) after the server is started -->
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-failsafe-plugin</artifactId>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>integration-test</goal>
                                    <goal>verify</goal>
                                </goals>
                            </execution>
                        </executions>
                        <configuration>
                            <trimStackTrace>false</trimStackTrace>
                            <enableAssertions>true</enableAssertions>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>

    </profiles>
</project>

As you can see I do not use the multiselect-combobox-add-on, which was the answer to this question.

Any help would be greatly appreciated. I have no clue about all of this this node_modules-stuff ^^'


Solution

  • Well, I randomly managed to make it work by myself.

    The new version of lookup-field-flow is using the official MultiselectComboBox component instead of 3rd party MultiSelectComboBox, which is no longer compatible with Vaadin 23.2+.

    I had to update

        <dependency>
            <groupId>com.vaadin.componentfactory</groupId>
            <artifactId>lookup-field-flow</artifactId>
            <version>23.1.3</version>
        </dependency>
    

    to

        <dependency>
            <groupId>com.vaadin.componentfactory</groupId>
            <artifactId>lookup-field-flow</artifactId>
            <version>23.2.0</version>
        </dependency>