Can Gatsby Pages be exposed as React Components via Webpack Module Federation?

[MrLeebo]

Hello Gatsby! I'm interested in learning about using page content from a Gatsby app in a federated application using Webpack's Module Federation feature. I'm curious to know if that's possible to do? Specifically, whether it's possible to expose Page as a federated React component.

For example, using the default app starter, which posts a blog post to /hello-world/, would it be possible to configure a federation config that allows

import Page from "cms/HelloWorldPage"

<Page /> // <article><p>This is my first post on my new fake blog! How exciting!</p></article>

to render the same content as the HTML file? Using gatsby-plugin-federation, I can set-up Module Federation in a Gatsby app, but so far I've only been able to federate the page-data.json for the blog post. Attempting to federate the template component and then pass page-data.json into it as props either fails because I'm missing some webpack loaders that Gatsby uses, or because I'm missing some runtime objects that the template component depends on.

// gatsby-config.js

/** @satisfies {import('gatsby').GatsbyConfig} */
const config = {
  plugins: [
    {
      resolve: "gatsby-plugin-federation",
      options: {
        ssr: false,
        federationConfig: {
          name: "cms",
          filename: "remoteEntry.js",
          remotes: {
            host: `host@${hostUrl}`,
            cms: `cms@${cmsUrl}`,
          },
          exposes: {
            // This works!
            "./HelloWorldData": "./public/page-data/hello-world/page-data.json"
            // But can I take it a step further?
            "./HelloWorldPage": "./????" // <<<---------
          },
          shared: {
            ...deps,
            react: { singleton: true, requiredVersion: deps.react },
            "react-dom": { singleton: true, requiredVersion: deps["react-dom"] },
          },
        },
      },
    },
  ]
}

module.exports = config

I think the problem is that I'd need to reference the page loader (via window.__loader.loadPage("/hello-world/")) or gatsby Router in my configuration, but those objects are built at runtime and won't be present yet when the webpack configuration is executing.