File id conflict

[RussianDragon]

Hi.

Bug report

Only in production mode I have error:

Uncaught (in promise) TypeError: h[e] is not a function
    at g (bootstrap:19:22)
    at container-entry:21:100
    at c.m.<computed> (remotes loading:97:23)
    at c (bootstrap:19:22)
    at c.t (create fake namespace object:10:23)
    at async dynamic-component.tsx:173:5

If the current behavior is a bug, please provide the steps to reproduce.

Full history:
I create module federation project. In development mode I not have problem. But turn on production mode I have catch runtime exception. With only specific controller in module.

After day research I found source of the problem. Both project have files in same id.
In shell project:
dist/client/542.2741fd703ebe0b58eb1b.js

In module project:
dist/client/542.4a3b95c1fb4dfe1f29b3.js

Template: [name].[contenthash].js
Filename doesn't matter. Problem in id.

Error in this file

// The module cache
var __webpack_module_cache__ = {};

// The require function
function __webpack_require__(moduleId) {
	// Check if module is in cache
	var cachedModule = __webpack_module_cache__[moduleId];
	if (cachedModule !== undefined) {
		return cachedModule.exports;
	}
	// Create a new module (and put it into the cache)
	var module = __webpack_module_cache__[moduleId] = {
		// no module.id needed
		// no module.loaded needed
		exports: {}
	};

	// Execute the module function
       //**** exception in this line. __webpack_modules__ not have  id 542 ****//
	__webpack_modules__[moduleId](module, module.exports, __webpack_require__); 

	// Return the exports of the module
	return module.exports;
}

// expose the modules object (__webpack_modules__)
__webpack_require__.m = __webpack_modules__;

// expose the module cache
__webpack_require__.c = __webpack_module_cache__;

if I change file name, in module project. Example
src\components\widgets\main_menu_widget\main_menu_widget.tsx
->
src\components\widgets\main_menu_widget\main_menu_widget1.tsx
the error disappears. Because file id is - 600. It does not match file in shell project.

What is the expected behavior?

I expect the shell project to have no errors when file ids match in module project

Other relevant information:
webpack version: 5.80.0
webpack-cli version: 5.0.1
Node.js version: v18.16.0

[alexander-akait]

please provide your configuration, thank you

[RussianDragon]

Module project

package.json

{
  "name": "@qp8-widget-platform/modules",
  "version": "0.1.1",
  "scripts": {
    "build": "rimraf dist/static/client && webpack --mode production --progress --config config/webpack.client.js",
    "start:dev": "npm run build:dev && npm run serve",
    "build:dev": "npm run build:client && npm run build:server",
    "build:client": "rimraf dist/static/client && webpack --mode development --progress --config config/webpack.client.js",
    "build:server": "rimraf dist/server && webpack --mode development --progress --config config/webpack.server.js",
    "serve": "node ./dist/server/main.js",
    "lint": "eslint \"src/**/*.ts{,x}\""
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@loadable/server": "^5.15.3",
    "@qp8-widget-platform/bridge": "^0.1.2",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-router-dom": "^6.10.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.4",
    "@loadable/babel-plugin": "^5.15.3",
    "@loadable/webpack-plugin": "^5.15.2",
    "@module-federation/node": "^0.12.2",
    "@types/express": "^4.17.17",
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.58.0",
    "@typescript-eslint/parser": "^5.58.0",
    "babel-loader": "^9.1.2",
    "copy-webpack-plugin": "^11.0.0",
    "eslint": "^8.38.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "fork-ts-checker-webpack-plugin": "^8.0.0",
    "prettier": "^2.8.7",
    "rimraf": "^4.4.1",
    "tslib": "^2.5.0",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.1",
    "webpack-merge": "^5.8.0"
  }
}

module-federation.js

const deps = require('../package.json').dependencies;
const { ModuleFederationPlugin } = require('webpack').container;
const { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');

const exposes = {
  //"{nodeType}": "{component}"
  //pages
  './start_page': './src/components/pages/start-page/start-page',
  './redirect_page': './src/components/pages/redirect-page/redirect-page',
  './text_page': './src/components/pages/text-page/text-page',
  //widgets
  './html_widget': './src/components/widgets/html-widget/html-widget',
  './chat_widget': './src/components/widgets/chat-widget/chat-widget',
  './rating_widget': './src/components/widgets/rating_widget/rating_widget',
  './main_menu_widget': './src/components/widgets/main_menu_widget/main_menu_widget1',
};

module.exports = {
  client: new ModuleFederationPlugin({
    name: 'qp_widgets_platform_modules',
    remotes: {
      minpromtorg_chat_widget: 'minpromtorg_chat_widget@https://aksis.dev.qsupport.ru/chat-widget/remoteEntry.js',
    },
    filename: 'remoteEntry.js',
    exposes: exposes,
    shared: {
      ...deps,
      react: {
        singleton: true,
        requiredVersion: deps.react,
      },
      'react-dom': {
        singleton: true,
        requiredVersion: deps['react-dom'],
      },
      'react-router-dom': { singleton: true },
      '@qp8-widget-platform/bridge': {
        singleton: true,
      },
    },
  }),
  clientSSR: [
    new NodeFederationPlugin({
      name: 'qp_widgets_platform_modules',
      filename: 'remoteEntry.js',
      library: { type: 'commonjs-module' },
      exposes: exposes,
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        'react-dom': {
          singleton: true,
          requiredVersion: deps['react-dom'],
        },
        'react-router-dom': { singleton: true },
        '@qp8-widget-platform/bridge': {
          singleton: true,
        },
      },
    }),
    new StreamingTargetPlugin({
      name: 'qp_widgets_platform_modules',
      library: { type: 'commonjs-module' },
    }),
  ],
};

webpack.client.js

const path = require('path');
const shared = require('./webpack.shared');
const moduleFederationPlugin = require('./module-federation');
const TsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const LoadablePlugin = require('@loadable/webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { merge } = require('webpack-merge');

/**
 * @type {import('webpack').Configuration}
 **/
const webpackConfig = {
  name: 'client',
  target: 'web',
  entry: path.resolve(__dirname, '../src/client/index'),
  mode: 'production',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, '../dist/static/client'),
    publicPath: 'auto',
    chunkFilename: '[name].[contenthash].js',
    filename: 'main.[contenthash].js',
  },
  plugins: [
    moduleFederationPlugin.client,
    new TsCheckerWebpackPlugin(),
    new LoadablePlugin({
      filename: 'loadable-stats.json',
      writeToDisk: true,
    }),
    new CopyPlugin({
      patterns: [
        {
          context: 'src/public',
          from: 'favicon.ico',
          to: 'favicon.ico',
        },
      ],
    }),
  ],
};

module.exports = merge(shared, webpackConfig);

webpack.shared.js

const path = require("path");

/**
 * @type {import('webpack').Configuration}
 **/
const webpackConfig = {
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
    alias: {
      pages: path.resolve(__dirname, "../src/components/pages/"),
      widgets: path.resolve(__dirname, "../src/components/widgets/"),
      src: path.resolve(__dirname, "../src/"),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

module.exports = webpackConfig;

.babelrc

{
  "plugins": [
    "@loadable/babel-plugin",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}

Shell project

package.json

{
  "name": "@qp8-widget-platform/shell",
  "version": "0.1.1",
  "scripts": {
    "build:prod": "npm run build:prod:client && npm run build:prod:server",
    "build:prod:client": "rimraf dist/client && webpack --mode production --progress --config config/webpack.client.prod.js",
    "build:prod:server": "rimraf dist/server && webpack --mode production --progress --config config/webpack.server.prod.js",
    "start:dev": "npm run build:dev && npm run serve",
    "build:dev": "npm run build:dev:client && npm run build:dev:server",
    "build:dev:client": "rimraf dist/client && webpack --mode development --progress --config config/webpack.client.dev.js",
    "build:dev:server": "rimraf dist/server && webpack --mode development --progress --config config/webpack.server.dev.js",
    "serve": "node ./dist/server/main.js",
    "lint": "eslint \"src/**/*.ts{,x}\""
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@loadable/server": "^5.15.3",
    "@qp8-widget-platform/bridge": "^0.1.2",
    "compression": "^1.7.4",
    "css-loader": "^6.7.3",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "normalize.css": "^8.0.1",
    "path": "^0.12.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-router-dom": "^6.10.0",
    "stream": "^0.0.2",
    "style-loader": "^3.3.2",
    "vm-browserify": "^1.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.21.4",
    "@loadable/babel-plugin": "^5.15.3",
    "@loadable/webpack-plugin": "^5.15.2",
    "@module-federation/node": "^0.13.0",
    "@types/compression": "^1.7.2",
    "@types/express": "^4.17.17",
    "@types/loadable__server": "^5.12.6",
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.58.0",
    "@typescript-eslint/parser": "^5.58.0",
    "babel-loader": "^9.1.2",
    "copy-webpack-plugin": "^11.0.0",
    "eslint": "^8.38.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-webpack-plugin": "^4.0.1",
    "fork-ts-checker-webpack-plugin": "^8.0.0",
    "prettier": "2.8.7",
    "rimraf": "^4.4.1",
    "tslib": "^2.5.0",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.1",
    "webpack-merge": "^5.8.0"
  }
}

module-federation.js

const deps = require('../package.json').dependencies;
const { ModuleFederationPlugin } = require('webpack').container;
const { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');

const remotes = {
  qp_widgets_platform_modules: 'qp_widgets_platform_modules@http://localhost:3331',
};

const getRemotes = (remotes, postfix) =>
  Object.keys(remotes).reduce(
    (acc, key) => ({
      ...acc,
      [key]: `${remotes[key]}${postfix}`,
    }),
    {},
  );

module.exports = {
  client: new ModuleFederationPlugin({
    name: 'qp_widgets_platform_shell',
    filename: 'remoteEntry.js',
    remotes: getRemotes(remotes, '/client/remoteEntry.js'),
    shared: {
      react: deps.react,
      'react-dom': deps['react-dom'],
      'react-router-dom': deps['react-router-dom'],
      '@qp8-widget-platform/bridge': {
        singleton: true,
      },
    },
  }),
  server: [
    new NodeFederationPlugin({
      name: 'qp_widgets_platform_shell',
      library: { type: 'commonjs-module' },
      filename: 'remoteEntry.js',
      remotes: getRemotes(remotes, '/server/remoteEntry.js'),
      shared: {
        react: deps.react,
        'react-dom': deps['react-dom'],
        'react-router-dom': deps['react-router-dom'],
        '@qp8-widget-platform/bridge': {
          singleton: true,
        },
      },
    }),
    new StreamingTargetPlugin({
      name: 'qp_widgets_platform_shell',
      library: { type: 'commonjs-module' },
      remotes: getRemotes(remotes, '/server/remoteEntry.js'),
    }),
  ],
};

webpack.client.dev.js

const EnvironmentPlugin = require('webpack').EnvironmentPlugin;
const shared = require('./webpack.client');
const { merge } = require('webpack-merge');

/**
 * @type {import('webpack').Configuration}
 **/
const webpackConfig = {
  output: {
    publicPath: '/',
  },
  plugins: [
    new EnvironmentPlugin({
      onboarding: {
        apiUrl: '/',
      },
    }),
  ],
};

module.exports = merge(shared, webpackConfig);

webpack.client.js

const path = require('path');
const shared = require('./webpack.shared');
const TsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const LoadablePlugin = require('@loadable/webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const moduleFederationPlugin = require('./module-federation');
const { merge } = require('webpack-merge');

/**
 * @type {import('webpack').Configuration}
 **/
const webpackConfig = {
  name: 'client',
  target: 'web',
  entry: [
    'core-js/modules/es.promise',
    'core-js/modules/es.array.iterator',
    path.resolve(__dirname, '../src/client/index'),
  ],
  mode: 'production',
  devtool: 'source-map',
  resolve: {
    fallback: {
      fs: false,
      vm: require.resolve('vm-browserify'),
    },
  },
  output: {
    path: path.resolve(__dirname, '../dist/client'),
    publicPath: 'auto',
    chunkFilename: '[name].[contenthash].js',
    filename: 'main.[contenthash].js',
  },
  plugins: [
    moduleFederationPlugin.client,
    new TsCheckerWebpackPlugin(),
    new LoadablePlugin({
      filename: 'loadable-stats.json',
      writeToDisk: true,
    }),
    new CopyPlugin({
      patterns: [
        {
          context: 'src/public',
          from: 'favicon.ico',
          to: 'favicon.ico',
        },
      ],
    }),
  ],
};

module.exports = merge(shared, webpackConfig);.

webpack.shared.js

const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');

/**
 * @type {import('webpack').Configuration}
 **/
const webpackConfig = {
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
    alias: {
      src: path.resolve(__dirname, '../src/'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|ts)x?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      },
    ],
  },
  plugins: [
    new ESLintPlugin({})
  ],
};

module.exports = webpackConfig;

.babelrc

{
  "plugins": [
    "@loadable/babel-plugin",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}

[alexander-akait]

Please open an issue in @module-federation repo, thank you,

You can ping me there too, also will be great if you create a reproducible test repo, I have idea why it happens, but will be great to check it with source code

[Hazlank]

@alexander-akait @RussianDragon Has this problem been solved?

[Hazlank]

Loaded Module Federation seems will make module cache it exports and then if you loaded main chunk, it will maybe can not find other exports constants

[octav47]

I had the same error

Hotfix was removing new webpack.optimize.MinChunkSizePlugin