Unable to resolve reference $lit npm error

[mshabarov]

Description of the bug

Docs project doesn't start in production mode and fails with

npm ERR! Unable to resolve reference $lit

if one upgrades to Vaadin 24.4.0.alpha5.

It might be a case that some Hilla dependency is declared and installed, but it depends on Lit and fail, because cannot find Lit package.

E.g. hilla-generator-plugin-model has a peer dependency to @vaadin/hilla-lit-form and nobody is installing @vaadin/hilla-lit-form when Hilla is not detected. But hilla-generator-plugin-model is still installed.

Vaadin should add Hilla dependencies consistently, or not add them at all.

This might be also an issue in the docs project itself having Hilla deps leftovers.

See also the discussion in Slack.

Expected behavior

Docs project starts with 24.4.0.alpha5.

Minimal reproducible example

Upgrade https://github.com/vaadin/docs/ to 24.4.0.alpha5 and start it.

Versions

• Vaadin / Flow version: 24.4.0.alpha5

[tltv]

It doesn't look like this is exactly correct anymore in docs side:

                                // "com.vaadin:hilla-lit" provides WC npm dependencies, and
                                // "com.vaadin:hilla-react" provides React ones, and they
                                // don't combine. But we need both in the docs project.
                                // Since this project depends on "com.vaadin:hilla-lit",
                                // the following workaround adds the Hilla React npm
                                // packages.
                                def hillaReactNpmPackages = [
                                        '@vaadin/hilla-react-auth',
                                        '@vaadin/hilla-react-form',
                                        '@vaadin/hilla-react-crud',
                                ]

If docs needs both, it's already adding react deps as react is default and Flow brings them in automatically. So we are missing the mentioned '@vaadin/hilla-lit-form' dependency now instead.

I tested this and it fixes the original issue. But then I get tons of other compilation errors like this:

Module not found: Error: Can't resolve
'Frontend/generated/com/vaadin/demo/domain/CardModel' in
'C:\Projects\Vaadin\docs\frontend\demo\component\accordion'

[tltv]

And this, from earlier in the logs:

2024-02-23T16:45:37.589+02:00 ERROR 21360 --- [onPool-worker-1] c.v.f.s.frontend.TaskRunDevBundleBuild   : Command `C:\Program Files\nodejs\node.exe C:\Projects\Vaadin\docs\node_modules\vite\bin\vite.js build` failed:
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v5.1.1 building for production...
transforming...
frontend/demo/auth/auth.ts(2,33): error TS2307: Cannot find module 'Frontend/generated/endpoints' or its corresponding type declarations.
frontend/demo/auth/MainLayout.tsx(38,68): error TS2339: Property 'name' does not exist on type '{}'.

Maybe endpoints are not generated and they should? It's not hilla app in sense of Flow's auto-detection as there's no hilla views present. Check routes.tsx and you see that it has just serverside views which is auto-detected by Flow as "Hilla not used", which means no endpoint generators run in NodeTasks. However this worked with alpha4. This change was added last week, EDIT it was not yet included in alpha4 apparently.

[tltv]

When I try to run vaadin:generate goal, it fails to this weird error.
[ERROR] Failed to execute goal com.vaadin:vaadin-maven-plugin:24.4.0.alpha5:generate (default-cli) on project docs: Execution default-cli of goal com.vaadin:vaadin-maven-plugin:24.4.0.alpha5:generate failed: A required class was missing while executing com.vaadin:vaadin-maven-plugin:24.4.0.alpha5:generate: org/springframework/data/jpa/domain/Specification

[tltv]

Tried with these missing dependencies/devDependencies that were still in alpha4 but vanished with alpha5 in package.json but no help:

    "@vaadin/hilla-generator-cli": "24.4.0-alpha5",
    "@vaadin/hilla-generator-core": "24.4.0-alpha5",
    "@vaadin/hilla-generator-plugin-backbone": "24.4.0-alpha5",
    "@vaadin/hilla-generator-plugin-barrel": "24.4.0-alpha5",
    "@vaadin/hilla-generator-plugin-client": "24.4.0-alpha5",
    "@vaadin/hilla-generator-plugin-model": "24.4.0-alpha5",
    "@vaadin/hilla-generator-plugin-push": "24.4.0-alpha5",
    "@vaadin/hilla-generator-plugin-subtypes": "24.4.0-alpha5",
    "@vaadin/hilla-generator-utils": "24.4.0-alpha5",

[tltv]

With this trick, Flow thinks it's using Hilla and application works with couple warnings about missing properties due to this trick:

export const routes = [
  { },
  ...serverSideRoutes
] as RouteObject[];

[mshabarov]

So to fix the docs repo, we need to apply the following:

1. Let the Flow think that Hilla is used with this workaround. This should be however improved later in Flow, so that it checks for endpoint classes on Java side and use the output to run the Hilla's generator, needs a ticket.
2. Add the @vaadin/hilla-lit-form package. Or maybe now it's enough to remove the existing workaround?

There is still a ClassNotFoundError issue with docs in production mode, but this should be handled within a separate ticket.

[tarekoraby]

The ClassNotFoundError is not specific to the docs project. It occurs in any Hilla project: vaadin/hilla#2117.

[mshabarov]

The workaround { } should be replaced after #18800.