PiT 24.4: observability flow demo has frontend compilation errors in rollup module

[manolo]

Description of the bug

When running the observability flow demo with 24.4 it raises a frontend compilation error:

vite v5.1.1 building for production...
transforming...
✓ 806 modules transformed.
error during build:
RollupError: Expression expected
    at error (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
    at parseError (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/parseAst.js:978:9)
    at convertNode (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/parseAst.js:2067:12)
    at convertProgram (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/parseAst.js:971:12)
    at parseAstAsync (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/parseAst.js:2118:12)
    at async Module.tryParseAsync (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/node-entry.js:13577:20)
    at async Module.setSource (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/node-entry.js:13158:35)
    at async ModuleLoader.addModuleSource (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/node-entry.js:17861:13)

Expected behavior

demo does not fail

Minimal reproducible example

git clone git@github.com:vaadin/observability-kit.git
cd observability-kit
git checkout use-hilla-24-4
mvn clean install -DskipTests
cd observability-kit-demo
mvn

Versions

• Vaadin / Flow version: 24.4-SNAPSHOT

[chrisbeaver]

I had a different problem, but found this because I got the same dumped stack trace. It didn't help that none of it was my code, but what did help was going into my node_modules at the first entry point in that dump.

at error (file:///private/tmp/tmp/observability-kit/observability-kit-demo/node_modules/rollup/dist/es/shared/parseAst.js:337:30)

I opened here, and just logged what was passed into it.

Rerun the build, and now you get more information.

After doing this, I ran the build and it took me to a place in my own code and I could fix it. It turned out I had a .js file with some JSX in it. I just needed to rename the extension to .jsx and the problem went away.

[manolo]

Thank for your tip, seems that the error is in this external component

code: 'PARSE_ERROR',
    id: '/private/tmp/o11y/observability-kit/observability-kit-demo/node_modules/@vaadin-component-factory/vcf-nav/src/vcf-nav.ts',
    message: 'Expression expected (Note that you need plugins to import files that are not JavaScript)',

[mshabarov]

This is an issue in vcf-nav indeed.

These two changes solves this problem for me:

1. Update vcf-nav version in the demo module to 1.1.2 (latest)

   
   @NpmPackage(value = "@vaadin-component-factory/vcf-nav", version = "1.1.2")
   public class Application implements AppShellConfigurator {
   
   public static void main(String[] args) {
       SpringApplication.run(Application.class, args);
   }

}

2. Remove `.js` extensions to solve next error:

Could not resolve "./src/vcf-nav-item.ts" from "node_modules/@vaadin-component-factory/vcf-nav/vcf-nav.js

Comitted here https://github.com/vaadin/vcf-nav/commit/1999dc23faa33bbabb8c9526c09cf0b919a1ce7e.

The demo module then starts fine for me. It, however, says that Observability agent is not running, but this is another thing.

[mshabarov]

@chrisbeaver thanks a lot for your tip. You saved hours of investigation time for us 👍

[chrisbeaver]

@mshabarov No problem! I'm glad I could help.

[mshabarov]

I'd recommend to migrate this demo module to Side Nav component, which is well maintained.

[manolo]

Fixed in https://github.com/vaadin/observability-kit/pull/244 that have the migration to side-nav