SolidJS•6mo ago

Cannot read properties of undefined @ router normalizePath

Hi! My issue is the one described up here in the title. The function that throws it is @solidjs > router > dist > utils.js > normalizePath. I temporarely patched it going from this:

export function normalizePath(path, omitSlash = false) {
    const s = path.replace(trimPathRegex, "$1");
    return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";
}

export function normalizePath(path, omitSlash = false) {
    const s = path.replace(trimPathRegex, "$1");
    return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";
}

To this:

export function normalizePath(path, omitSlash = false) {
    const s = path?.replace(trimPathRegex, "$1");
    return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";
}

export function normalizePath(path, omitSlash = false) {
    const s = path?.replace(trimPathRegex, "$1");
    return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";
}

(Simply adding a '?' before .replace) The structure of my webapp (where this issue happens) is the following: => Layout: (logged).tsx

export default function LoggedLayout(props: ParentProps) {
  return (
    <div class="flex">
      <Navbar />
      <Suspense>
        <div class="mt-28 w-full grow p-4 md:ml-[var(--nav-w)] md:mt-auto">
          {props.children}
        </div>
      </Suspense>
    </div>
  );
}

export default function LoggedLayout(props: ParentProps) {
  return (
    <div class="flex">
      <Navbar />
      <Suspense>
        <div class="mt-28 w-full grow p-4 md:ml-[var(--nav-w)] md:mt-auto">
          {props.children}
        </div>
      </Suspense>
    </div>
  );
}

=> And the page where the issue happens: index.tsx:

const queryFn = axios.get("http//...")

export const route = {
  load() {
    // prefetch w cache
  },
} satisfies RouteDefinition;
export default function Home() {
  const opportunities = // query data
  return (
      <section class="flex flex-col gap-5">
        <For each={opportunities.data}>
          {(category) => {
            return (
              <div>
                <p>{category.tagTitle}</p>
                <div class="grid grid-cols-opportunities gap-5">
                  <For each={category.opportunities}>
                    {(opp, i) => (
                      <GeneralOpportunity
                        {...opp}
                        tags={[category.tagTitle]}
                        idx={i()}
                      />
                    )}
                  </For>
                </div>
              </div>
            );
          }}
        </For>
      </section>
  );
}

const queryFn = axios.get("http//...")

export const route = {
  load() {
    // prefetch w cache
  },
} satisfies RouteDefinition;
export default function Home() {
  const opportunities = // query data
  return (
      <section class="flex flex-col gap-5">
        <For each={opportunities.data}>
          {(category) => {
            return (
              <div>
                <p>{category.tagTitle}</p>
                <div class="grid grid-cols-opportunities gap-5">
                  <For each={category.opportunities}>
                    {(opp, i) => (
                      <GeneralOpportunity
                        {...opp}
                        tags={[category.tagTitle]}
                        idx={i()}
                      />
                    )}
                  </For>
                </div>
              </div>
            );
          }}
        </For>
      </section>
  );
}

Am I doing something wrong? Thanks : )

6 Replies

peerreynders•6mo ago

Are you saying you are attempting:

src/routes/(logged).tsx
src/routes/index.tsx

src/routes/(logged).tsx
src/routes/index.tsx

instead of

src/routes/(logged).tsx
src/routes/(logged)/index.tsx

src/routes/(logged).tsx
src/routes/(logged)/index.tsx

???

EnrypaseOP•6mo ago

Hi. Thanks for anwering. I think it's better if I share directly a screenshot of it. (The api folder was renamed to _api just for the sake of the screenshot)

peerreynders•6mo ago

I wonder if

src/routes/(logged)/opportunities/[opportunity](page).tsx

src/routes/(logged)/opportunities/[opportunity](page).tsx

was actually meant to be

# content for /opportunities/{opportunity}
src/routes/(logged)/opportunities(page)/[opportunity].tsx

# content for /opportunities/{opportunity}
src/routes/(logged)/opportunities(page)/[opportunity].tsx

# layout for / (for content in (logged) directory)
src/routes/(logged).tsx
# nested content for /
src/routes/(logged)/index.tsx
# content for /opportunities
src/routes/(logged)/opportunities/index.tsx
# content for /opportunities/fund
src/routes/(logged)/opportunities/fund.tsx
# nested layout for /opportunities (for content in opportunities(page) directory)
src/routes/(logged)/opportunities(page).tsx
# *** Where is src/routes/(logged)/opportunities(page)/index.tsx ***
# content for /opportunities/{opportunity} ?
src/routes/(logged)/opportunities/[opportunity](page).tsx
# content for /register
src/routes/register.tsx
# content for /login
src/routes/login.tsx
# content for 404
src/routes/[...404].tsx

# layout for / (for content in (logged) directory)
src/routes/(logged).tsx
# nested content for /
src/routes/(logged)/index.tsx
# content for /opportunities
src/routes/(logged)/opportunities/index.tsx
# content for /opportunities/fund
src/routes/(logged)/opportunities/fund.tsx
# nested layout for /opportunities (for content in opportunities(page) directory)
src/routes/(logged)/opportunities(page).tsx
# *** Where is src/routes/(logged)/opportunities(page)/index.tsx ***
# content for /opportunities/{opportunity} ?
src/routes/(logged)/opportunities/[opportunity](page).tsx
# content for /register
src/routes/register.tsx
# content for /login
src/routes/login.tsx
# content for 404
src/routes/[...404].tsx

EnrypaseOP•6mo ago

Hey! Sorry for the late response. I actually wanted to have every file named differently since I have an API endpoint called opportunity too. If I'm not mistaken it's fine to call it in that way just for a sorting purpose. The issue I'm experiencing happens in index.tsx. For example, removing the "?" from the file I've described previously triggers the error you can see in the image

peerreynders•6mo ago

If I'm not mistaken it's fine to call it in that way just for a sorting purpose.

I'm not convinced that is an option. The route naming conventions align with the way the route components would be organized within the router tree. What are you even trying to express here?

src/routes/(logged)/opportunities/[opportunity](page).tsx

src/routes/(logged)/opportunities/[opportunity](page).tsx

[opportunity] is a path param for a dynamic route. But I would expect that to be followed by either a file extension (.tsx) or path delimiter (/); the following (path).tsx makes no sense to me. I'm exploring the possibility that the source code is correct, i.e. that path should never be undefined and that an ill-formed route specification manifests as the path being undefined.

EnrypaseOP•6mo ago

I had multiple files named [opportunity] (in routes and routes/api) and I wanted to differentiate between them. But if there's no way for doing so it's fine : ) Regarding the issue that I had before: I used a template for simulating some API calls. When I switched to actual APIs the error doesn't happen again...

Gaming

Programming

Cannot read properties of undefined @ router normalizePath