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
peerreynders2mo 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
???
Enrypase
Enrypase2mo 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)
No description
peerreynders
peerreynders2mo 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
Enrypase
Enrypase2mo 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
No description
peerreynders
peerreynders2mo 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.
Enrypase
Enrypase2mo 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...
Want results from more Discord servers?
Add your server
More Posts
The combination of API routes and data loading functionsI have been trying out integrating my existing API routes with `cache` and `action` deploying to **cHow to Execute Server Action on Each Route Visit?I have a home component (code in comments) In summary, what this component does is it calls a serveThe requested module '/_build/node_modules/.pnpm/debug@4.3.4/node_modules/debug/src/browser.js?v=d23I published a new version of `solid-markdown` a while ago, and it broke a lot of people's imports wiWhole page component rerenders in default Solid-Start projectWhen I'm trying to use input field, the whole page rerender after loading data from resource, causinSolidStart: Uncaught SyntaxError: The requested module '/_build/node_modules/resolve/index.js'I tried modifying and improving the official note app * adding formatting with prettier, added prettDifferent folder but making Vercel work on it (I'm a beginner)Hello. For school do I need to make a project in a default folder structure. How can I make Vercel wPath syntax flexibilityIs this example from the docs supposed to work? Seems nice to be able to select keys using a functiRenaming Index not working?Hi! I just created a project with SolidStart starter and chose the tailwind with typescript templateGetting Prisma TypeError in the browser console in a SolidStart app after doing build and start:The error: `TypeError: Failed to resolve module specifier ".prisma/client/index-browser". Relative I have a question when building npm create solid with-prisma template.In npm run dev, prisma with url="File:./dev.db" works fine, but when you run npm run build and start