Vite issue when trying to use javascript in view controller

Support
#1

Hi, using the actual jmix version and node.js version…
I want to use some javascript in a view,
placed the .js file in src/main/resources/META-INF/resources/VAADIN

I tried different settings to get @JavaScript(“VAADIN/mapCapture.js”)
working in the view controller,
like adding this to the vite.config.js:

plugins: [vaadinPlugin()],
build: {
rollupOptions: {
external: [
‘/META-INF/resources/VAADIN/mapCapture.js’ // Add your JS file here
]
}

but I only get error messages on startup.
ReferenceError: vaadinPlugin is not defined … the .js is in the correct path and vite.config.ts is enhanced

or

ava.lang.IllegalStateException: com.vaadin.flow.server.ExecutionFailedException: Vite build exited with a non zero status
at com.vaadin.base.devserver.AbstractDevServerRunner.getCause(AbstractDevServerRunner.java:789) ~[vaadin-dev-server-24.7.5.jar:na]

Is there any step by step docu how to do that?

KR
Roland

#3

Hi,

You don’t need to edit vite.config.js. In the Flow UI, you have two options to place JS files:

  1. src/main/frontend
  2. resources/META-INF/frontend

When just define the js file path related to this folders, e.g. if I place the test.js file inside src/main/resources/META-INF/frontend/test.js, the correct path is @JavaScript("./test.js")

Regards,
Gleb

#5

Hi,

thx for that, will try it.
Funny enough that the JMIX AI told me to do it :slight_smile:
So, actually still better to ask in the Forum.

Roland