Closed lelabo-m closed 6 months ago
Should my codegen look like this instead?
import { type RouteType as Route_0} from "./src/app/food/routeType";
import { type RouteType as Route_1} from "./src/app/food/[foodId]/routeType";
import type { InferRoute, StaticRoute } from "next-typesafe-url";
declare module "@@@next-typesafe-url" {
interface DynamicRouter {
"/food": InferRoute<Route_0>;
"/food/[foodId]": InferRoute<Route_1>;
}
interface StaticRouter {
"/about/fodmap": StaticRoute;
"/": StaticRoute;
"/quiz/willitfodmap": StaticRoute;
}
}
OK, I found why my _next-typesafe-url_.d.ts
was not generated as expected.
My "/food/[foodId]"
routeType file was the only one with a .tsx
instead of a .ts
(is there a reason why .tsx are not supported?).
However, I am still not able to build the project. The $path
error is still there.
Type error: Type '{ foodId: number; }' is not assignable to type 'undefined'.
26 | href={$path({
27 | route: "/food/[foodId]",
> 28 | routeParams: { foodId: food.id },
| ^
29 | })}
30 | >
31 | {food.name}
ELIFECYCLE Command failed with exit code 1.
There is a problem with the PathOptions<T>
generation for $path()
but I don't understand why yet.
The intention with only supporting routeType.ts
and not routeType.tsx
is that there really shouldnt be any jsx code in that file. Ideally the only thing there is the Route
and RouteType
declaration and export.
As for the $path error, someone else reported something similar- but it is very difficult to diagnose the problem without a reproduction. Are you able to share the code, or a example app with the same problem?
Thanks for trying out the package and reporting the issue
The intention with only supporting
routeType.ts
and notrouteType.tsx
is that there really shouldnt be any jsx code in that file. Ideally the only thing there is theRoute
andRouteType
declaration and export.
I understand I create many .tsx
in my pages by inattention, and it is a bad habit. Not supporting .tsx
makes sense, I was just curious.
For the $path()
, I created a minimal reproducible example there: https://github.com/lelabo-m/error-reproduction-minimal-env/tree/next-typesafe-url/path-parameters-inference
If you open the project, and go to the root page (./src/app/page.tsx
), you should be able to see that typescript isn't happy with the parameters given to $path
.
thank you I will take a look this weekend
I managed to understand what was going on.
_next-typesafe-url_.d.ts
is not treated as an ambient file because of the imports in the start of the file.
Therefore, the following is not working:
import { StaticRouter, DynamicRouter } from '@@@next-typesafe-url'; // does not work.
[...]
type Test = "/a_dynamic_route" extends StaticRoutes ? true : false; // will always return true.
I am not an expert on the subject so maybe a specific tsconfig.json
or modifying the codegen output path could fix this.
What I learn from this message on StackOverflow,
is that import could be moved into the declaration to make the .d.ts
file ambient.
Example of conversion that work:
FROM
import { type RouteType as Route_0 } from "./src/app/food/[foodId]/routeType";
import { type RouteType as Route_1 } from "./src/app/food/routeType";
import { type RouteType as Route_2 } from "./src/app/quiz/[quizId]/routeType";
import { type RouteType as Route_3 } from "./src/app/quiz/routeType";
import type { InferRoute, StaticRoute } from "next-typesafe-url";
declare module "@@@next-typesafe-url" {
interface DynamicRouter {
"/food/[foodId]": InferRoute<Route_0>;
"/food": InferRoute<Route_1>;
"/quiz/[quizId]": InferRoute<Route_2>;
"/quiz": InferRoute<Route_3>;
}
interface StaticRouter {
"/about/fodmap": StaticRoute;
"/admin/dashboard": StaticRoute;
"/": StaticRoute;
"/under_construction": StaticRoute;
}
}
TO
declare module "@@@next-typesafe-url" {
import type { InferRoute, StaticRoute } from "next-typesafe-url";
import { type RouteType as Route_0 } from "./src/app/food/[foodId]/routeType";
import { type RouteType as Route_1 } from "./src/app/food/routeType";
import { type RouteType as Route_2 } from "./src/app/quiz/[quizId]/routeType";
import { type RouteType as Route_3 } from "./src/app/quiz/routeType";
interface DynamicRouter {
"/food/[foodId]": InferRoute<Route_0>;
"/food": InferRoute<Route_1>;
"/quiz/[quizId]": InferRoute<Route_2>;
"/quiz": InferRoute<Route_3>;
}
interface StaticRouter {
"/about/fodmap": StaticRoute;
"/admin/dashboard": StaticRoute;
"/": StaticRoute;
"/under_construction": StaticRoute;
}
}
Opened a PR (#85) with a proposed fix in case this issue is relevant and not just a project configuration issue.
Hi, I have picked up your package recently (due to Theo's video about Tanstack Router).
I have a page with the following URL
http://localhost:3000/food/28881
I defined my
routeType.ts
as follow:But when I try to use it in a
Link
, routeParams is underlined with the error message:Type '{ foodId: number; }' is not assignable to type 'undefined'.
My codegen file look like this:
From what I understood about the package, I think my route should not be in the
StaticRouter
. It should be aDynamicRoute
.The error might be due to not using
searchParams
on this route?My
package.json
looks like this: