ModuleFederationPlugin not generate remoteEntry.js

Bug report

What is the current behavior? My purpose is the building assets with only 1 js file, which is remoteEntry.js.Here is my configuration:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const { LimitChunkCountPlugin } = require("webpack").optimize;
const path = require("path");

module.exports = {
  entry: {
    app2: "./src/index",
  },
  mode: "development",
  devServer: {
    static: path.join(__dirname, "dist"),
    port: 3002,
  },
  output: {
    publicPath: "auto",
    clean: true,
  },
  optimization: {
    minimize: false,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-react"],
        },
      },
    ],
  },
  plugins: [
    // To learn more about the usage of this plugin, please visit https://webpack.js.org/plugins/module-federation-plugin/
    new ModuleFederationPlugin({
      name: "app2",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App",
      },
      // shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new LimitChunkCountPlugin({
      maxChunks: 1,
    }),
  ],
};

Using the configuration, the build result is two files, one is index.html and the other is app2.js.But I found app2.js start with var app2;. So Is there a problem with the assignment logic on the file name?

Tip: I found if I use the shared option, the filename will be remoteEntry.js.

If the current behavior is a bug, please provide the steps to reproduce. You can clone the demo code from https://github.com/zxf4399/missing-remoteEntry.

# install dependencies
yarn
yarn start
# open Chrome browser and input `localhost:3001`
# you will find `localhost:3002/remoteEntry.js` but you can not get it after building, that's a little weird.

What is the expected behavior? app2.js to remoteEntry.js.

Other relevant information: webpack version: 5.73.0 Node.js version: 16.15.0 Operating System: Apple M1 Pro Additional tools:

[alexander-akait]

Yeah, you can avoid webpack comments and set it globally for all import(...)s, anyway I recommend not to do it, it is bad for perf, except you really undestand why you do it and why you need it

[zxf4399]

@alexander-akait Thanks for your help, finally, I found out how to achieve my goal. Add module.parser.javascript.dynamicImportMode = eager

Here is the modified configuration:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const { LimitChunkCountPlugin } = require("webpack").optimize;
const path = require("path");

module.exports = {
  entry: {
    app2: "./src/index",
  },
  mode: "development",
  devServer: {
    static: path.join(__dirname, "dist"),
    port: 3002,
  },
  output: {
    publicPath: "auto",
    clean: true,
  },
  optimization: {
    minimize: false,
  },
  module: {
    parser: {
      javascript: {
       // the core modification 
        dynamicImportMode: "eager",
      },
    },
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-react"],
        },
      },
    ],
  },
  plugins: [
    // To learn more about the usage of this plugin, please visit https://webpack.js.org/plugins/module-federation-plugin/
    new ModuleFederationPlugin({
      name: "app2",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App",
      },
      // shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new LimitChunkCountPlugin({
      maxChunks: 1,
    }),
  ],
};