core: Typescript type fetching fails in NextJS

I created two NextJS apps called host and remote. After installing the necessary plugins and adding them to next.config whenever I try to run the host it always fails at fetching types from the remote. Although it creates the @mf-types dir in the host and fetches the types accordingly my terminal shows the following error:

Screenshot 2023-10-30 at 10 20 52

Remote setup: Node: 18.17.0 Next: 13.5.5 React: 18.2.0 @module-federation/nextjs-mf: 7.0.8 @module-federation/typescript: 3.0.1 URL: localhost:3000


/** @type {import('next').NextConfig} */
const NextFederationPlugin = require("@module-federation/nextjs-mf");
const { FederatedTypesPlugin } = require("@module-federation/typescript");

const federationConfig = () => ({
  name: "remote",
  filename: "static/chunks/remoteEntry.js",
  exposes: {
    "./button": "./components/Button/index.tsx",
  },
});

const nextConfig = {
  webpack(config, options) {
    const { isServer } = options;

    config.plugins.push(new NextFederationPlugin(federationConfig()));

    config.plugins.push(
      new FederatedTypesPlugin({
        federationConfig: federationConfig(),
      })
    );
    return config;
  },
};

module.exports = nextConfig;

Host setup: Node: 18.17.0 Next: 13.5.5 React: 18.2.0 @module-federation/nextjs-mf: 7.0.8 @module-federation/typescript: 3.0.1 URL: localhost:3001

/** @type {import('next').NextConfig} */
const NextFederationPlugin = require("@module-federation/nextjs-mf");
const { FederatedTypesPlugin } = require("@module-federation/typescript");

const federationConfig = (isServer) => ({
  name: "home",
  filename: "static/chunks/remoteEntry.js",

  remotes: {
    remote: `remote@http://localhost:3000/_next/static/${
      isServer ? "ssr" : "chunks"
    }/remoteEntry.js`,
  },
});

const nextConfig = {
  webpack(config, options) {
    const { isServer } = options;

    config.plugins.push(new NextFederationPlugin(federationConfig(isServer)));

    config.plugins.push(
      new FederatedTypesPlugin({
        federationConfig: federationConfig(isServer),
      })
    );

    return config;
  },
};

module.exports = nextConfig;

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Comments: 15 (2 by maintainers)

Most upvoted comments

We will introduce remote types natively in near future.

Ok πŸ˜ƒ please try the new version β€œ3.1.0-canary.1”

This looks like it’s fixed in main, next published version should work