onClick() event not firing when backend function imported

Ask the community
1

I created a function in my backend that I want to call from my page code when a button is clicked. The problem is whenever I import that function from the page code, the onClick() event ceases firing. I commented out all code except for console.log(), and it is not executed unless I comment out where I import the function.

When the code is as follows the click event does not work. When I press the button I do not see “Button Clicked” on my console.

import { accessFile } from 'backend/accessFile.js';

export function accessButton_click(event) {
	console.log("Button Clicked");
}

When the import line is commented out, the event is then called, and I see “Button Clicked” on my console.

//import { accessFile } from 'backend/accessFile.js';

export function accessButton_click(event) {
	console.log("Button Clicked");
}

Note that the accessFile backend function is empty in this example.

I feel like there is something fundamental here I am not seeing, but I haven’t been able to figure it out. Any help would be welcome.

2

Hi,

This error is likely occuring because you are attempting to import a function from a .js file from the backend. Files with the .js extension in the backend are only accessible by other backend files on Velo.

If you check out your live published site you will likely see the following error in the console:

Client-side scripts can only import web-modules from backend code context.

To fix this you can instead import a function from a .jsw (web module) file.

You can learn more about calling functions from the backend from the following:

Velo Web Modules: Calling Backend Code from the Frontend

1 Like