Error fetching types - not exposed by remote app (nextjs-mf)

[hongkiulam]

Apologies if I'm being dumb, I'm getting an error similar to https://github.com/module-federation/typescript/issues/21 in my container app it's failing to fetch types from the remote app

ERROR fetching/writing types [AxiosError: Request failed with status code 404] {
  code: 'ERR_BAD_REQUEST',
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function: httpAdapter],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function] },
    validateStatus: [Function: validateStatus],
    headers: {
      Accept: 'application/json, text/plain, */*',
      'User-Agent': 'axios/0.27.2'
    },
    method: 'get',
    url: 'http://localhost:3001/@mf-typescript/__types_index.json',
    data: undefined
  },

And in the remote app, the types can be found directly under .next which seems to make sense based on the code in this package

I'm using v0.2.2 with Next.js

Container webpack.config.js

const nextConfig = {
  webpack(config, options) {
    const { isServer } = options;
    if (!options.isServer) {
      const nextFederationConfig = {
        name: "container",
        filename: "static/chunks/remoteEntry.js",
        remotes: {
          home: `home@http://localhost:3001/_next/static/${
            isServer ? "ssr" : "chunks"
          }/remoteEntry.js`,
        },
        exposes: {},
        shared: {},
        ...
      };
      config.plugins.push(
        new NextFederationPlugin(nextFederationConfig),
        new FederationTypesPlugin(nextFederationConfig)
      );
    }
    return config;
  },
};

Remote webpack.config.js

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: "standalone",
  webpack(config, options) {
    const { isServer, webpack } = options;
    if (!options.isServer) {
      const nextFederationConfig = {
        name: "home",
        filename: "static/chunks/remoteEntry.js",
        remotes: {},
        exposes: {
          "./Header": "lib/Header",
          "./Counter": "lib/Counter",
          "./CounterStateLib": "lib/CounterStateLib",
          "./state/counter": "lib/state/counter",
        },
        shared: {},
        ...
      };
      config.plugins.push(
        new NextFederationPlugin(nextFederationConfig),
        new FederationTypesPlugin(nextFederationConfig)
      );
    }

    config.plugins.push(new webpack.EnvironmentPlugin(["APP_ENV"]));
    return config;
  },
};

Let me know if anymore information would help, Thanks

[hongkiulam]

I imagine I could just copy the types into public unless there's a better alternative 🤔

[pavandv]

Ahh I see, I think I know what is happening... This might take a bit of time to fix it.

Please watch the progress over nextjs-mf repo where we have migrated this package to.

[hongkiulam]

Ahh I see, I think I know what is happening... This might take a bit of time to fix it.

Please watch the progress over nextjs-mf repo where we have migrated this package to.

Awesome, let me know if I can be of any help