NextJS Module Federation Remote to React App Host

Question

I have a Next JS fullstack app that I am trying to split into modules. I implemented as shown in the docs for @module-federation/nextjs-mf. My config in next.config.mjs looks like this:

webpack(config, options) {
        const { webpack, isServer } = options
        config.resolve.fallback = {
            ...config.resolve.fallback,
            fs: false,
        }
        config.plugins.push(
            new NextFederationPlugin({
                name: 'remote',
                remotes: {},
                filename: 'static/chunks/remoteEntry.js',
                exposes: {
                    './theComponent':
                        './src/components/HomeComponents/TheComponent/TheComponent.tsx',
                },
                shared: {
                    react: { eager: true, singleton: true },
                },
                extraOptions: {},
            }),
        )

        return config

And on the react host app I have the webpack.config.ts include this:

 plugins: [
            new ModuleFederationPlugin({
                name: 'host',
                filename: 'remoteEntry.js',
                remotes: {
                    remote: `remote@http://localhost:3001/_next/static/chunks/remoteEntry.js`,
                },
            }),
        ],

I get a typescript compilation error but even when that is silenced the module cannot be found at runtime.

const TheComponent = lazy(() => import('remote/theComponent') as Promise<{ default: React.FC<any> }>);

The network requests upon navigating to the used part of the react app look like this:

I can see the remoteEntry.js and the chunk of interest in _next/static/chunks/ with what looks like the proper component code, just not sure why it isn't being imported correctly into the host app. Any guidance people can offer is appreciated!