Wix Studio Editor I am getting an error on wix-location saying, “Cannot find module 'wix-location' or its corresponding type declarations.”

Ask the community
, , ,
1

I’m having trouble with

I am trying to setup a router that does a couple of things.

  1. It adjusts the query depending on the Project Category in the “prefix” position
  2. If a specific item (SnapMD) is requested, redirect the user to a unique page made for that item.

But I am getting an error on wix-location saying, “Cannot find module ‘wix-location’ or its corresponding type declarations.”

Working in
Wix Studio Editor

Site link
The site is https://benjaminbross.com but I have not deployed the router to the live site yet.

You can try the test site at https://www.benjaminbross.com/?rc=test-site

What I’ve tried so far

import { redirect } from "wix-router";

import wixLocation from 'wix-location';


export function workRouter_customizeQuery(request, route, query) {

if (route === "/branding/{Project Name}") return query.eq("primaryCategory", "Branding");

else if (route === "/product/{Project Name}") return query.eq("primaryCategory", "Product Managment");

else if (route === "/creative/{Project Name}") return query.eq("primaryCategory", "Creative");

else if (route === "/product/SnapMD") return redirect(wixLocation.to('work/{Primary Category}/unique/snapmd'));

else return query;

}

Extra context

Changing to wix-location-frontend does NOT solve the issue. It just gets the same error.

2

import wixLocation from 'wix-location' became import wixLocationFrontend from 'wix-location-frontend' a little while ago. They both import and do the same thing.

That said, they can only be used in page code, and won’t work when using routers.

When working with routers, you’ll want to use the data provided in the request to understand the page being navigated to - docs for it here - Wix Router Request Introduction | Velo

3

Thanks @noahlovell ,

I tried making the following adjustment, but not even the console.log is working. What am I missing?

import { redirect } from "wix-router";

export function workRouter_customizeQuery(request, route, query) {
  let baseURL = request.baseUrl;
  console.log("ROUTE",route)
  if (route === "work/branding/{Project Name}") return query.eq("primaryCategory", "Branding");
  if (route === "work/product-management/{Project Name}") return query.eq("primaryCategory", "Product Managment");
  if (route === "work/creative/{Project Name}") return query.eq("primaryCategory", "Creative");
  if (route === "work/product-management/virtual-care-management") return redirect(baseURL+'/work/product-management/unique/snapmd');
  else return query;
}
4

The biggest issue is likely the function name. In Wix Routers, the naming convention is prefix_hookName. Since your URL prefix is work, the function must be named work_customizeQuery. If it’s named workRouter_..., it won’t recognize it as the hook and will just skip it.

I also noticed you were trying to match strings like "{Project Name}". The router doesn’t parse those as variables in a string comparison; instead, you should use the request.path array to look at specific segments of the URL.

Here is a cleaned-up version of the code:

import { redirect } from "wix-router";

export function work_customizeQuery(request, route, query) {
    console.log("Router running")
    const baseURL = request.baseUrl;
    const path = request.path; // This is an array of the URL segments after /work/

    const category = path[0];
    const projectSlug = path[1];

    // 1. Handle the SnapMD redirect first
    if (category === "product-management" && projectSlug === "virtual-care-management") {
        return redirect(`${baseURL}/work/product-management/unique/snapmd`);
    }

    // 2. Adjust queries based on the category segment (path[0])
    if (category === "branding") {
        return query.eq("primaryCategory", "Branding");
    } 
    else if (category === "product-management") {
        // Double check your collection spelling for "Managment" vs "Management"!
        return query.eq("primaryCategory", "Product Managment");
    } 
    else if (category === "creative") {
        return query.eq("primaryCategory", "Creative");
    }

    return query;
}

A few quick tips on this:

  • Path segments: path[0] is your category (branding, creative, etc.), and path[1] is the specific item slug. This is much more reliable than trying to match the full route string.
  • Typos: Just a heads up - your code uses "Product Managment" (missing the ‘e’). Make sure that matches correctly!

Hope this helps with the direction :slight_smile: I imagine you’ll need to adapt it further to work with your use case!

5

@noahlovell Thank you so much!

“Managment” was a typo in my router code and is spelled correctly in the collection.

Unfortunately, this still does not seem to be working. At least, the redirect is not loading the alternate page layout and the query changes do not seem to impact the data in such a way that the next and previous buttons function within only the active “Primary Category”

Here is the code I plugged in (yours with a couple very small adjustments)

import { redirect } from "wix-router";

export function work_customizeQuery(request, route, query) {
    console.log("Router running")
    const baseURL = request.baseUrl;
    const path = request.path; // This is an array of the URL segments after /work/

    const category = path[0];
    const projectSlug = path[1];

    // 1. Handle the SnapMD redirect first
    if (category === "product-management" && projectSlug === "virtual-care-management") {
        return redirect(`${baseURL}/work/product-management/unique/snapmd`), 
        query.eq("projectName", "Virtual Care Management");
    }

    // 2. Adjust queries based on the category segment (path[0])
    if (category === "branding") {
        return query.eq("primaryCategory", "Branding");
    } 
    else if (category === "product-management") {
        return query.eq("primaryCategory", "Product Management");
    } 
    else if (category === "creative") {
        return query.eq("primaryCategory", "Creative");
    }

    return query;
}

Any thoughts?

6

Hey @noahlovell ,

I have been going through the documentation, over and over again and I just can’t get this to work.

As I think I mentioned, I am trying to do two things:

  1. Send specific requests to unique pages designed for that record
  2. virtual-care-management -to- /unique/snapmd
  3. Ensure that the datasets for category pages correctly targeted

The second one may not even be necessary since I created unique pages for each category.

For #1, I have tried both beforeRouter() and afterRouter()

Can you help me identify what I am doing wrong?

Here is what I have right now:

import { redirect, next } from "wix-router";

export function work_beforeRouter(request) {
    console.log("Before router running")
    const baseURL = request.baseURL;
    const path = request.path;
    const category = path[0];
    const projectSlug = path[1];

    // Handle redirects
    if (category === "creative" && projectSlug === "preparetv") {
        return redirect(`${baseURL}/work/creative/unique/preparetv`); 
    }
    if (category === "product-management" && projectSlug === "virtual-care-management") {
        return redirect(`${baseURL}/work/product-management/unique/snapmd`); 
    }
    return next();    
}

export function work_customizeQuery(request, route, query) {
    console.log("Router running")
    const path = request.path;
    const category = path[0];
    const projectSlug = path[1];

    console.log("Category", category)
    console.log("Slug", projectSlug)

    if (category === "branding") {
        return query.eq("primaryCategory", "branding");
    } 
    else if (category === "product-management") {
        return query.eq("primaryCategory", "product management");
    } 
    else if (category === "creative" && projectSlug === "preparetv") {
        return query.eq("primaryCategory", "creative").eq("projectName", "preparetv");
    }
    else if (category === "creative") {
        return query.eq("primaryCategory", "creative");
    }
    return query;
}