Using NextJS and Federated Web Components

So Im trying to use Federated Modules to bring in a Vanilla Web Component (Im using lit-html for the rendering piece otherwise nothing else) into a NextJS application. Im attempting to follow the example here https://github.com/module-federation/module-federation-examples/tree/master/nextjs-ssr using the @telenko/node-mf plugin but so far I have not gotten this to work. Here is the next.config.js:

const packageJsonDeps = require("./package.json").dependencies;
const { NodeModuleFederation } = require("@telenko/node-mf");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  future: { webpack5: true },
  webpack: (config, { isServer }) => {
    const mfConf = {
      remotes: {
        create_cc: "snap_payment_create_cc_v1@http://localhost:5009/payment/create_cc/v1/remoteEntry.js"
      },
      shared: {
        react: {
          eager: true,
          requiredVersion: packageJsonDeps["react"],
          singleton: true,
        },
        "react-dom": {
          eager: true,
          requiredVersion: packageJsonDeps["react-dom"],
          singleton: true,
        },
      },
    };
    return {
      ...config,
      plugins: [
        ...config.plugins,
        new (isServer ? NodeModuleFederation : ModuleFederationPlugin)(mfConf),
      ],
      experiments: { topLevelAwait: true },
    };
  },

  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config;
  },
};

The web component is self defining so I would expect that I could bring it in just for the side effects like so:

await import("snap_payment_create_cc_v1/payment-create_cc")


const PaymentPaymentWrapper = async ({content}) => {
    console.log("TESTTSLKDJSLFKSJD", Test)

    return (
        <>
            <h3>{content.title}</h3>
            <div id="paymentCreation">
                <h3>{content.createMethodTitle}</h3>
                <payment-create_cc></payment-create_cc>
            </div>
        </>
    )
}

export default PaymentPaymentWrapper

but I get errors around using top-level-await (Error: error: top level await requires target to es2017 or higher and topLevelAwait:true for ecmascript) that I’m really struggling to solve and if I don’t use await on it then I get errors around resolving the module (Can’t resolve ‘snap_payment_create_cc_v1/payment-create_cc’). Any thoughts on what I could be doing wrong

[ScriptedAlchemy]

Next doesn’t play nice with the import syntax. Use low level api and probably need the paid plugin for it to have a chance of working

Rust compiler requires layers experiment as well to get top-level await

U can switch back to babel tho if needed

[ScriptedAlchemy]

Also you can use next 12 and just keep a babelrc file. If Babel config is found SWC isn’t used