Custom element fetch call returning a 404 error

Ask the community
, , , ,
1

Question:

Why is my custom element fetch call to /_functions-dev/getListingsInBounds returning a 404 error, even though the backend function exists and is correctly defined in backend/http-functions.jsw?

Product:

Wix Studio Editor — using a Custom Element with backend HTTP functions (Velo)

What I’m trying to achieve:

I’m building a full-screen Google Maps integration on my UList platform. I want to display property listings from my CMS (PropertyListings collection) as labeled pins based on the current visible bounds of the map — similar to VRBO.

  • The listings have a field called geoLocation, which is a custom object with a nested location object that holds latitude and longitude.
  • I’m using a custom element (<google-map>) to render the map, and loading the Google Maps API dynamically with a key stored in the SiteSettings collection.
  • The pins render fine when hardcoded (so the map + rendering logic work).
  • The problem is happening when I try to load listings dynamically using fetch('/_functions-dev/getListingsInBounds').

What I have already tried:

  • Verified the file exists: backend/http-functions.jsw
  • Confirmed the export signature is correct: export async function post_getListingsInBounds(request) {}
  • Confirmed that my backend function (getListingsInBounds) is working when isolated
  • The frontend fetch call is using POST with the correct JSON payload
  • Tried using both /_functions/ and /_functions-dev/ paths
  • Cleared cache, republished site, and checked logs (function never logs anything — so it’s not being hit)
  • Previously tested with hardcoded pins — those still render fine
  • Confirmed no typos in endpoint naming, and the function file is in the http-functions.jsw namespace
  • Have reviewed Velo HTTP function docs and several forum topics (e.g. this one)

Additional information:

  • The error is 404 Not Found from the browser dev console
  • Site is currently in preview mode
  • I’m using fetch('/_functions-dev/getListingsInBounds') in the custom element
  • My API key is injected correctly and Google Maps is fully rendering
  • Here’s my fetch call:
const res = await fetch("/_functions-dev/getListingsInBounds", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ swLat, swLng, neLat, neLng })
});
  • Here’s my function export in http-functions.jsw:
import { getListingsInBounds } from 'backend/mapListings';

export async function post_getListingsInBounds(request) {
  const { swLat, swLng, neLat, neLng } = await request.body.json();
  const listings = await getListingsInBounds(swLat, swLng, neLat, neLng);
  return new Response(JSON.stringify(listings), {
    headers: { "Content-Type": "application/json" }
  });
}

Would love to know if there’s something I’m missing regarding custom elements calling backend functions. Thanks in advance!

2

Hi, @Harrison_Holetz !!

I believe that when using HTTP functions in Wix, you’re not supposed to create your own backend file like http-functions.jsw. Instead, you should use a file named http-functions.js, which is automatically generated by Wix. Also, if you want to call backend functions from within a custom element, that approach isn’t necessarily required. It’s often simpler to use .setAttribute() or .on() to communicate with the page code, and then call the backend function from there. :smiling_face_with_sunglasses:

2 Likes