diff --git a/.changeset/cold-bulldogs-help.md b/.changeset/cold-bulldogs-help.md new file mode 100644 index 0000000000..48879663e0 --- /dev/null +++ b/.changeset/cold-bulldogs-help.md @@ -0,0 +1,5 @@ +--- +"@react-router/dev": patch +--- + +fix: add support for `.md` and `.mdx` file modules in type generation diff --git a/integration/typegen-test.ts b/integration/typegen-test.ts index 7117c23a41..f46dee2267 100644 --- a/integration/typegen-test.ts +++ b/integration/typegen-test.ts @@ -743,4 +743,36 @@ test.describe("typegen", () => { expect(proc.stderr.toString()).toBe(""); expect(proc.status).toBe(0); }); + + test("md/mdx route", async () => { + const cwd = await createProject({ + "vite.config.ts": tsx` + import mdx from "@mdx-js/rollup"; + import { reactRouter } from "@react-router/dev/vite"; + + export default { + plugins: [mdx(), reactRouter()], + }; + `, + "app/routes.ts": tsx` + import { type RouteConfig, route } from "@react-router/dev/routes"; + + export default [ + route("home", "routes/home.md"), + route("changelog", "routes/changelog.mdx"), + ] satisfies RouteConfig; + `, + "app/routes/home.md": tsx` + # Lorem ipsum + `, + "app/routes/changelog.mdx": tsx` + # Lorem ipsum + `, + }); + + const proc = typecheck(cwd); + expect(proc.stdout.toString()).toBe(""); + expect(proc.stderr.toString()).toBe(""); + expect(proc.status).toBe(0); + }); }); diff --git a/packages/react-router-dev/typegen/generate.ts b/packages/react-router-dev/typegen/generate.ts index f4a0a04f6d..700f91dfba 100644 --- a/packages/react-router-dev/typegen/generate.ts +++ b/packages/react-router-dev/typegen/generate.ts @@ -50,6 +50,18 @@ export function generateServerBuild(ctx: Context): VirtualFile { export const ssr: ServerBuild["ssr"]; export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"]; } + + declare module "*.md" { + import * as React from "react"; + const MDComponent: React.FunctionComponent; + export default MDComponent; + } + + declare module "*.mdx" { + import * as React from "react"; + const MDXComponent: React.FunctionComponent; + export default MDXComponent; + } `; return { filename, content }; }