Javascript Function defined in JsFile used by @JavaScript - Annotation is n


i have this js file in frontend/js/test.js

function testFunction() {
	console.log("Here i am");

My view is doing at class level a


And during startup Webpack tells me

 ./js/test.js?babel-target=es6 55 bytes {0} [built]

My Code executes a


But i can’t see the log in the browser’s js console…
Doing a console.log(typeof testFunction) results in undefined

Anyone a glue what’s missing?

Kind regards

Hi Michael,

Your JavaScript file is embedded as a module. So your function testFunction. is not defined globally ( but in a module scope).

You can define it globally like this:
window.testFunction = function testFunction()…


thanks for the information. Will try that.

But i thought using a @JavaScript - Annotation is not to define a function on module basis but to define a “regular” Javascript (think you call it global) function?!

Can you give me a link explaining the differences between global Javascript and Javascript modules?

Kind Regards


Sorry for the late answer. I don’t know if there is something about JavaScript module in It’s not specific to vaadin. here you have some explanation or here

I also do not quite understand myself why @JavaScript annotation doesn’t import functions into global scope, since (according to ) it should "import plain .js files. "

I have opened a bug report here, since this topic definitely needs to be clarified, either in the documentation or in @JavaScript class javadoc:

Hi, I’ve summarized the topic at - please let me know what you think :slight_smile:

That’s a really good summary :slight_smile: