Cannot find module '@vaadin/router' or its corresponding type declarations

Flow
1

A common pattern we use in projects is “mvn clean install” from the command line, and then go to IntelliJ and click “Debug using HotswapAgent”. This often (but seems not always weirdly enough) results in below exception during startup:

ERROR(TypeScript)  Cannot find module '@vaadin/router' or its corresponding type declarations.
 FILE  /home/user/src/app/src/main/frontend/generated/index.ts:14:24

    12 |
    13 | // import Vaadin client-router to handle client-side and server-side navigation
  > 14 | import { Router } from '@vaadin/router';
       |                        ^^^^^^^^^^^^^^^^
    15 |
    16 | // import Flow module to enable navigation to Vaadin server-side views
    17 | import { Flow } from 'Frontend/generated/jar-resources/Flow.js';

[TypeScript] Found 1 error. Watching for file changes.
Initializing Servlet 'dispatcherServlet'
Completed initialization in 3 ms
[vite] (client) Pre-transform error: Failed to resolve import "@vaadin/router" from "src/main/frontend/generated/index.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/user/app/src/main/frontend/generated/index.ts:14:23
  1  |  import { Router } from "@vaadin/router";
     |                          ^
  2  |  import { Flow } from "Frontend/generated/jar-resources/Flow.js";
  3  |  const { serverSideRoutes } = new Flow({
[vite] Internal server error: Failed to resolve import "@vaadin/router" from "src/main/frontend/generated/index.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/user/app/src/main/frontend/generated/index.ts:14:23
  1  |  import { Router } from "@vaadin/router";
     |                          ^
  2  |  import { Flow } from "Frontend/generated/jar-resources/Flow.js";
  3  |  const { serverSideRoutes } = new Flow({

EDIT seems it’s not related to the commandline build, also when doing a “Rebuild project” in IntelliJ the same error happens.

2

To provide more information about the issue, during the maven ‘compile’ phase, ‘vaadin:build-frontend’ goal is executed with the following configuration:

      <plugin>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-maven-plugin</artifactId>
        <version>${vaadin.version}</version>
        <configuration>
          <ciBuild>false</ciBuild>
          <forceProductionBuild>true</forceProductionBuild>
          <reactEnable>false</reactEnable>
        </configuration>
        <executions>
          <execution>
            <goals>
              <goal>build-frontend</goal>
            </goals>
            <phase>compile</phase>
          </execution>
        </executions>
      </plugin>

which produces ‘./src/main/frontend/generated/index.ts’ (among other generated files). Of course, this is the expected result.

In our local environments, we enable hotdeploy though, which creates a ‘./src/main/frontend/generated/index.tsx’ file.
If both ‘index.ts’ and ‘index.tsx’ files exist in the generated folder, ‘index.ts’ is picked up first, and not ‘index.tsx’, which leads to the error mentioned by my colleague.
In this situation, a quick and dirty fix is to manually delete the ‘index.ts’ file.

Our question is: Is this a bug? Or is it something we can do in order to avoid the error?

3

Eventually, doing the maven dance fixed the problem.