Add and use npmpackage

I’m not able to use a npm package, I need it to execute some functions of a library not available for Java, only Js.

In my MainLayout class I added

@NpmPackage(value = “@xxx”, version = “123”)

After building the Frontend, I can see the package has been added to package.json

Then I try to use it, and this is where the problems come: I see an error in the browser console when I try to run from java:

UI.getCurrent().getPage().executeJs(“”"
console.log(“test”);
const test = new xxx();“”");

“Test” gets printed, but then I see “xxx has not been defined”

Is there any good example on how to do this? Thanks

You might be missing a @JsModule module import?

See Loading Resources | Advanced Topics | Vaadin Docs

But it depends on the @xxx in question

The module in this case is a web3 library, @web3auth/modal. With @JsModule(“@web3auth/modal”) is see the error on loading the page.

I think it’s not loading the package dependencies and the error comes from one of them

If you’re not making an add-on, you can just install the dependencies through npm without the annotation

It seems the root issue comes from the generated flow-imports.js file. One promise returns an error related to a function (not a function). The class causing the issue is new Web3Auth, I’m trying to include in my app this portion of code:
https://github.com/stackup-wallet/next-web3auth-userop-example/blob/main/src/pages/index.tsx, line 54 to 67

Did you tried to create a TS file in the fronted folder that imports the required type and exposes a global function that you can call from Java with executeJavascript?
That script should be the one referenced by JsModule, combined with the NpmPackage annotations to important the used package in the project

Yes, it is exactly what I did. I’m seeing that sometimes vite generates the js file with errors. I will investigate more tomorrow!

I’ve solved the issue, it was due to a dependency version. Now I have another issue: process is undefined. I think this issue also comes from a dependency, but I’m not able to understand which one. Will update in case of any finding, it could be useful for other people

Ok, I’ve managed to make it work playing with dependencies and vite configuration.

Now I have another issue: when I try to open a modal though the js package I’ve installed, it doesn’t appear. I see a portion of html is added to the Dom, but most of it is missing.

Any idea on how to show modals with a js external library?