[yarn] - Unable to install the node modules with Node 22+

[HackPoint]

Describe the Bug

Hi,
I'm trying to install the latest version of Kaoto ( UI ), by just simple running yarn install but it seems that I'm getting an error:
My settings are:

Apple M3 Max
Sonoma: 14.6.1 (23G93)

node -v
v22.12.0

yarn -v
4.5.0

java:
java: 21-oracle

➤ YN0009: │ kaoto@workspace:. couldn't be built successfully (exit code 1, logs can be found here: /private/var/folders/qc/pdvz_7sx4sv2kb7vzkg_x8d00000gn/T/xfs-ecb1e86c/build.log)
➤ YN0000: └ Completed in 1m 2s
➤ YN0000: · Failed with errors in 1m 2s

The error it self:
import catalogLibraryIndex from '../dist/camel-catalog/index.json' assert { type: 'json' };
                                                                   ^^^^^^

SyntaxError: Unexpected identifier 'assert'
    at compileSourceTextModule (node:internal/modules/esm/utils:338:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:102:18)
    at #translate (node:internal/modules/esm/loader:437:12)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:484:27)
    at async ModuleJob._link (node:internal/modules/esm/module_job:115:19)

Steps to Reproduce the Bug or Issue

yarn install

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 0.30.0]
  Apple M3 Max
  Sonoma: 14.6.1 (23G93)
  Chrome: Version 131.0.6778.265 (Official Build) (arm64)

[lordrip]

Hi @HackPoint , this seems to be related to node.js 22, could you try with node.js 20 instead?

[apupier]

I confirm, I reproduce the error with Node 22.13.1

[lordrip]

One solution could be to rewrite the existing Typescript script into Javascript, so we can remove ts-loader. We're open to contributions if that's something that might seem interesting to you @HackPoint 😃

[HackPoint]

One solution could be to rewrite the existing Typescript script into Javascript, so we can remove ts-loader. We're open to contributions if that's something that might seem interesting to you @HackPoint 😃

I am working on extension just wanted to sync up with the latest. Still haven't saw the change list and much more documentation on how and where it's possible to extend the application. But I dislike React in way possible.

[lordrip]

This is the build process rather than react, but point noted 😅

[HackPoint]

Hi @HackPoint , this seems to be related to node.js 22, could you try with node.js 20 instead?

This does work with latest 20.18.2 but I will try to see how to fix that issue.

[lordrip]

One quick thing to try is to remove the assert { type: 'json' } portion from:

import catalogLibraryIndex from '../dist/camel-catalog/index.json' assert { type: 'json' };

and rewrite the script in Javascript, basically just stripping the types from it and trying it.

[HackPoint]

One quick thing to try is to remove the assert { type: 'json' } portion from:

import catalogLibraryIndex from '../dist/camel-catalog/index.json' assert { type: 'json' };

and rewrite the script in Javascript, basically just stripping the types from it and trying it.

I will try it, for sure. I'll update about it.

[HackPoint]

@lordrip Say please who is responsible over the backend of the generation of the schema and the UI, I get some error when I try to extend the UI with new .yaml template. Who can elaborate of how the schema is validated and generated in the UI?