Script to generate types with @module-federation/enhanced

[ATakaSKY]

Describe the bug

I've a webpack project with react which has 2 command under scripts, one to build the project with mode production and other one is to start the dev server in development mode:

"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"

Now I am generating remote types with @module-federation/enhanced package. The problem is every time I run either of these two commands, the package always ends up regenerating the types for me. Since I just want types to be generated once before local dev/build, I turned off type generation in that common config by this option dts: { consumeTypes: false }.

To achieve type generation beforehand, I ended up creating a separate webpack config to just fetch the remote types.
I have added a script in package json which basically runs this config file:
"microfrontend-types:codegen": "webpack --mode none --config webpack.mf.types.js"

webpack.mf.types.js

const path = require("path");
const { ModuleFederationPlugin } = require("@module-federation/enhanced");

// remote to fetch types from
const TYPES_URL = "http://localhost:3001";

const config = {
  entry: {
    testApp: ["react-hot-loader/patch", path.join(__dirname, "dev/index.tsx")],
  },
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "test",
      filename: "remoteEntry.js",
      remotes: {
        testProj: `testMF@${TYPES_URL}/ui/remoteEntry.js?v=${Date.now()}`,
      },
    }),
  ],
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

// To exit process after fetching federation types
config.plugins.push({
  apply: (compiler) => {
    compiler.hooks.done.tap("ModuleFederationPlugin", () => {
      console.log("\x1b[32m", "Federation types fetched. Exiting...");
      process.exit(1);
    });
  },
});

module.exports = config;

If you look at the above config, you'll see I'm also exiting webpack process because if I don't do it, webpack starts complaining about the usage of types in components, reason being types getting regenerated here. Somehow the approach that I'm following doesn't look clean to me.

I expected the type generation thing to be one command which I could run separately irrespective whether I'm running the project or building it. Is there a way to achieve it ? I am thinking something similar to how apollo codegen works

Reproduction

NA

Used Package Manager

npm

System Info

NA

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

Why do you need types generated beforehand? The build should pull the types ahead of time already, and re-pull them each time to sync it per build update (like hmr)

[ATakaSKY]

I had to generate it this way because every time types was regenerating, I was getting below error:

Attaching a screenshot for the issue I'm facing:

I think the project also tries to compile at the same time types are being refetched and could be the reason why it's not able to comprehend in the usage file.

[ScriptedAlchemy]

Usually it should wait for type sync before attempting to build. Do you have a repo I can look at?