Passing component from loader?

Question

I want to use MDX for my project, but as I am getting my data (in markdown) via API, I can't just import it, I have to parse it in my app.

For this, I've made a function that'll take the raw markdown and compile it using @mdx-js/mdx, as per their docs:

return {
  data: result,
  body: String(
    await compile(item, {
      outputFormat: "function-body",
    })
  ),
};

Then, I want to load this in my loader function:

export async function loader({ params }: Route.LoaderArgs) {
  const post = await getBlogPost(params.slug);

  if (post?.body) {
    const content = await run(post.body, {
      ...runtime,
      baseUrl: import.meta.url,
    });

    return {
      ...post.data,
      body: post.body,
      Content: content.default,
    };
  }

  // eslint-disable-next-line @typescript-eslint/only-throw-error
  throw redirect("/404");
}

and everything is fine, but Content doesn't work, it is passed as an object, not as a function. I have to do client-side parsing, and this is pointless when using an SSR framework:

export default function Entry({ loaderData }: Route.ComponentProps) {
  const [Cnt, setCnt] = useState<ComponentType>(Fragment);

  useEffect(() => {
    (async () => {
      try {
        const content = await run(loaderData.body, {
          ...runtime,
          baseUrl: import.meta.url,
        });

        setCnt(() => content.default);
      } catch (error) {
        console.error("Error loading content:", error);
      }
    })();
  }, [loaderData.body]);

  return <div>{<Cnt />}</div>;
}

Any ideas how I can pass the component from loader, or do this in any other way?

Answer 1

Not an answer to your question, but you can get rid of one of your // eslint-disable-next-line comments by adding this to your eslint config:

      '@typescript-eslint/only-throw-error': [
        'error',
        {
          allow: ['Redirect'],
          allowThrowingAny: false,
          allowThrowingUnknown: false,
        },
      ],