dashboard tutorial
Unanswered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Type error for Link Component
I am currently working through the invoice dashboard tutorial and experiencing a build error while attempting to deploy the app. After successfully connecting Vercel to github, I received an error message that states
***
Type error: "/login" is not an existing route. If it is intentional, please type it explicitly with
ESling is snagging it at <Link href="/login" of app/page.tsx with the following error message:
Type '"/login"' is not assignable to type 'UrlObject | RouteImpl<"/login">'.ts(2322)
link.d.ts(77, 5): The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & LinkRestProps & { href: UrlObject | RouteImpl<"/login">; }'
**
Initially this got hung up on the app the component for the app home page but then failed on the deployment Link components with the same error.
Current @types/react is 18.2.55
Any assistance would be greatly appreciated!
I am currently working through the invoice dashboard tutorial and experiencing a build error while attempting to deploy the app. After successfully connecting Vercel to github, I received an error message that states
***
Type error: "/login" is not an existing route. If it is intentional, please type it explicitly with
as Route.ESling is snagging it at <Link href="/login" of app/page.tsx with the following error message:
Type '"/login"' is not assignable to type 'UrlObject | RouteImpl<"/login">'.ts(2322)
link.d.ts(77, 5): The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & LinkRestProps & { href: UrlObject | RouteImpl<"/login">; }'
**
Initially this got hung up on the app the component for the app home page but then failed on the deployment Link components with the same error.
Current @types/react is 18.2.55
Any assistance would be greatly appreciated!
3 Replies
Asiatic LionOP
@!=tgt - Thanks for responding.
I haven't configured it yet. Just following the tutorial. Setting up the database and deploying to Vercel occurs in Chapter 6, but authentication is taken care of in Chapter 15.
Additionally there is a compile error that refers to an issue with the Link component:
Type error: Type 'string' is not assignable to type 'UrlObject | RouteImpl<string>'.
32 | <Link
33 | key={link.name}
35 | className={clsx(
36 | 'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
37 | {
Error: Command "npm run build" exited with 1
I haven't configured it yet. Just following the tutorial. Setting up the database and deploying to Vercel occurs in Chapter 6, but authentication is taken care of in Chapter 15.
Additionally there is a compile error that refers to an issue with the Link component:
Type error: Type 'string' is not assignable to type 'UrlObject | RouteImpl<string>'.
32 | <Link
33 | key={link.name}
34 | href={link.href}| ^
35 | className={clsx(
36 | 'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
37 | {
Error: Command "npm run build" exited with 1
Asiatic LionOP
So I was able to rectify the issue by running through the tutorial. I think what I did was replaced the string literals with single quotes. But I am running into a quirky issue that is related to routing. The issue is when I click on the nav links, for example to go to Customers, it attempts to go to dashboard/customers not ui/dashboard/customers.
* The customers and invoices pages.tsx are correctly in their respective folders.
* The dashboard is in directory app/ui.
* No errors in the code are being detected.
* I have verified that I can manually navigate to the pages so the app router can get to the pages.
* I have tried to manually set the following paths without any luck:
dashboard: ui/dashboard
customers: ui/dashboard/customers
invoices: ui/dashboard/invoices
Here is how the links are configured in nav-links.tsx
const links = [
{ name: 'Home', href: '/dashboard', icon: HomeIcon },
{
name: 'Invoices',
href: '/dashboard/invoices',
icon: DocumentDuplicateIcon,
},
{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
];
* The customers and invoices pages.tsx are correctly in their respective folders.
* The dashboard is in directory app/ui.
* No errors in the code are being detected.
* I have verified that I can manually navigate to the pages so the app router can get to the pages.
* I have tried to manually set the following paths without any luck:
dashboard: ui/dashboard
customers: ui/dashboard/customers
invoices: ui/dashboard/invoices
Here is how the links are configured in nav-links.tsx
const links = [
{ name: 'Home', href: '/dashboard', icon: HomeIcon },
{
name: 'Invoices',
href: '/dashboard/invoices',
icon: DocumentDuplicateIcon,
},
{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
];