[Bug]: exception on no default in render function

[stalexxx]

What version of React Router are you using?

7.0.0.pre.5

Steps to Reproduce

having this code

export async function loader({ params, request }: Route.LoaderArgs) {}
export function TeachLayout() {}

actual problem goes away when adding default

export default function TeachLayout() {}

Expected Behavior

some usefull debug message

Actual Behavior

throwing

Error: Expected a Response to be returned from resource route handler
    at invariant3 (/Users/alex/prj/sotochka/sotka-remix/node_modules/react-router/dist/index.js:8684:11)
    at handleResourceRequest (/Users/alex/prj/sotochka/sotka-remix/node_modules/react-router/dist/index.js:9419:5)
    at requestHandler (/Users/alex/prj/sotochka/sotka-remix/node_modules/react-router/dist/index.js:9205:18)
    at nodeHandler (/Users/alex/prj/sotochka/sotka-remix/node_modules/@react-router/dev/dist/vite.js:1688:30)
    at /Users/alex/prj/sotochka/sotka-remix/node_modules/@react-router/dev/dist/vite.js:1694:17

[bmatzner]

I ran into this as well. In my case, a resource route with a loader only did not return a valid Response. So the error message was helpful. The message that this is a bug in React Router, however, was not – after all it was an issue in my code, not in React Router.

[discoverlance-com]

I ran into this same issue and as suggested by @stalexxx, I added the default export and that resolved the issue. I only had an action defined in my resource route.

[mattoni]

I'm having the same issue, but when using a data route with a plain return or a return wrapped in data. Wrapping in a Response works though.

not working:

export async function loader({ request }: LoaderFunctionArgs) {
	const url = new URL(request.url);
	const q = url.searchParams.get("q");

	if (!q) {
		throw new Response("no search query provided", { status: 422 });
	}

	return await learnIndex.search<
				Pick<
					ArticleSearchDocument,
					"title" | "description" | "headers" | "breadcrumb" | "path"
				>
			>(q, {
				attributesToRetrieve: [
					"title",
					"description",
					"headers",
					"breadcrumb",
					"path",
				],
			})
}

Working:

export async function loader({ request }: LoaderFunctionArgs) {
	const url = new URL(request.url);
	const q = url.searchParams.get("q");

	if (!q) {
		throw new Response("no search query provided", { status: 422 });
	}

	return new Response(
		JSON.stringify(
			await learnIndex.search<
				Pick<
					ArticleSearchDocument,
					"title" | "description" | "headers" | "breadcrumb" | "path"
				>
			>(q, {
				attributesToRetrieve: [
					"title",
					"description",
					"headers",
					"breadcrumb",
					"path",
				],
			}),
		),
	);
}

However, when using Response , my type inference for the loader is no longer working:

export type SearchApiResponse = ReturnType<typeof useLoaderData<typeof loader>>;

I'm on react-router: 7.0.2

[discoverlance-com]

I'm having the same issue, but when using a data route with a plain return or a return wrapped in data. Wrapping in a Response works though.

not working:

export async function loader({ request }: LoaderFunctionArgs) {
	const url = new URL(request.url);
	const q = url.searchParams.get("q");

	if (!q) {
		throw new Response("no search query provided", { status: 422 });
	}

	return await learnIndex.search<
				Pick<
					ArticleSearchDocument,
					"title" | "description" | "headers" | "breadcrumb" | "path"
				>
			>(q, {
				attributesToRetrieve: [
					"title",
					"description",
					"headers",
					"breadcrumb",
					"path",
				],
			})
}

Working:

export async function loader({ request }: LoaderFunctionArgs) {
	const url = new URL(request.url);
	const q = url.searchParams.get("q");

	if (!q) {
		throw new Response("no search query provided", { status: 422 });
	}

	return new Response(
		JSON.stringify(
			await learnIndex.search<
				Pick<
					ArticleSearchDocument,
					"title" | "description" | "headers" | "breadcrumb" | "path"
				>
			>(q, {
				attributesToRetrieve: [
					"title",
					"description",
					"headers",
					"breadcrumb",
					"path",
				],
			}),
		),
	);
}

However, when using Response , my type inference for the loader is no longer working:

export type SearchApiResponse = ReturnType<typeof useLoaderData<typeof loader>>;

I'm on react-router: 7.0.2

On response inference, yes that will not work because new Response accepts a stratified json which in essence is just a string so can't be inferred. In thise case, it might be best to just define your type manually in that file and export it to use. I am not sure if Response in javascript supports some generic types.

Thanks for working update. I also tried that and yes, if I use new Response, that works. So it looks like for resource routes we should be using new Response returns and not the data function from RR7

[felixmokross]

I just ran into this on an app which I recently upgraded from Remix to RR7.

As I understand it, resource routes must now always return a Response object. In Remix it worked with just returning the plain object.

Not sure if I missed this in the migration guide or it was not missed to be announced as breaking change.

Anyway I could easily fix it like this:

export async function loader() {
-  return { version: getVersion() };
+  return Response.json({ version: getVersion() });
}

See React Router docs

[fiws]

Have this issue but with actions. Also noticed an inconsistency where this error somehow does not trigger in the "root" but only in routes.

// this does not trigger an error
await fetch('/', /* … */);

// this triggers "Expected a Response to be returned from resource route handler"
await fetch('/test-action', /* … */);

See this repro: https://stackblitz.com/edit/github-9n22esmg?file=app%2Froot.tsx

[timdorr]

@fiws That is not related to this issue at all. You're returning a raw object from your resource route. You need to wrap it in Response.json(). E.g., return Response.json({});

[fiws]

@fiws That is not related to this issue at all. You're returning a raw object from your resource route. You need to wrap it in Response.json(). E.g., return Response.json({});

Want me to create another issue then? As i'm getting exactly the same "The following error is a bug in React Router; Expected a Response to be returned from resource route handler." error message. The stack trace virtually looks identical apart from the line numbers (as expected from dist js files).

[brophdawg11]

This should have been resolved by #12848 in 7.1.4