For an ESM project, importing the webpack plugin causes an "SyntaxError" error

[patricklafrance]

Describe the bug

For an ESM project, importing the webpack plugin as shown in the documentation:

import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";

Causes the following error:

packages/host dev: import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";
packages/host dev:          ^^^^^^^^^^^^^^^^^^^^^^
packages/host dev: SyntaxError: Named export 'ModuleFederationPlugin' not found. The requested module '@module-federation/enhanced/webpack' is a CommonJS module, which may not support all module.exports as named exports.
packages/host dev: CommonJS modules can always be imported via the default export, for example using:
packages/host dev: import pkg from '@module-federation/enhanced/webpack';
packages/host dev: const { ModuleFederationPlugin } = pkg;
packages/host dev:     at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
packages/host dev:     at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
packages/host dev:     at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
packages/host dev:     at async WebpackCLI.tryRequireThenImport (C:\Dev\poc\mf-enhanced-import-webpack-plugin-issue\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\webpack-cli\lib\webpack-cli.js:232:34)
packages/host dev:     at async loadConfigByPath (C:\Dev\poc\mf-enhanced-import-webpack-plugin-issue\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\webpack-cli\lib\webpack-cli.js:1406:27)
packages/host dev:     at async Promise.all (index 0)
packages/host dev:     at async WebpackCLI.loadConfig (C:\Dev\poc\mf-enhanced-import-webpack-plugin-issue\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\webpack-cli\lib\webpack-cli.js:1460:35)
packages/host dev:     at async WebpackCLI.createCompiler (C:\Dev\poc\mf-enhanced-import-webpack-plugin-issue\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\webpack-cli\lib\webpack-cli.js:1781:22)
packages/host dev:     at async Command.<anonymous> (C:\Dev\poc\mf-enhanced-import-webpack-plugin-issue\node_modules\.pnpm\@[email protected][email protected][email protected][email protected]\node_modules\@webpack-cli\serve\lib\index.js:81:30)
packages/host dev:     at async Command.parseAsync (C:\Dev\poc\mf-enhanced-import-webpack-plugin-issue\node_modules\.pnpm\[email protected]\node_modules\commander\lib\command.js:935:5)

If I instead replace the import for:

import ModuleFederation from "@module-federation/enhanced/webpack";

And instanciate the plugin with the following:

new ModuleFederation.ModuleFederationPlugin({
});

Now everything works fine.

I am not sure if this is an issue with the documentation or how the code is packaged?

Thank you,

Patrick

Reproduction

https://github.com/patricklafrance/mf-enhanced-import-webpack-plugin-issue

Used Package Manager

pnpm

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 14.54 GB / 31.70 GB
  Binaries:
    Node: 21.7.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 124.0.6367.61
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1

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]

I believe this is because it emits commonjs only as it is just tsc

[patricklafrance]

Here's additional info: https://publint.dev/@module-federation/[email protected]

The package does not specify the "type" field. Environments may incorrectly identify a CJS file as ESM in the future. Consider adding "type": "commonjs".

The types is interpreted as CJS when resolving with the "import" condition. This causes the types to be ambiguous when default importing the package due to its implied interop. Consider splitting out two "types" conditions for "import" and "require", and use the .mts extension, e.g. pkg.exports["."].import.types: "./dist/src/index.d.mts"

[ScriptedAlchemy]

like this? #2376

[ScriptedAlchemy]

@patricklafrance try 0.0.0-next-20240425010938

[patricklafrance]

No luck, still not working. I still get:

packages/remote-2 dev: import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";
packages/remote-2 dev:          ^^^^^^^^^^^^^^^^^^^^^^
packages/remote-2 dev: SyntaxError: Named export 'ModuleFederationPlugin' not found. The requested module '@module-federation/enhanced/webpack' is a CommonJS module, which may not support all module.exports as named exports.
packages/remote-2 dev: CommonJS modules can always be imported via the default export, for example using:
packages/remote-2 dev: import pkg from '@module-federation/enhanced/webpack';

Maybe this online linter is not as good as it seems 😆

Is there a specific reason why you are not releasing ESM packages?

[patricklafrance]

I logged this issue more as a FYI, I didn't really mind because there seemed to be an easy workaround by using:

import ModuleFederation from "@module-federation/enhanced/webpack";

Instead of:

import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";

But now, I am really stuck. Turns out that the webpack CLI requires:

import ModuleFederation from "@module-federation/enhanced/webpack";

But the Jest CLI requires:

import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";

So now I am stuck, not sure what to do about this! I updated my reproduction to include a reproduction with Jest. Hope this help!

[patricklafrance]

I stumbled on this article which explains how a CommonJs module should be exported to be consumable in ESM as a named import.

Following the content of the article, I manually updated node_modules/@module-federation/enhanced/dist/src/webpack.js from:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModuleFederationPlugin = void 0;
var ModuleFederationPlugin_1 = require("./wrapper/ModuleFederationPlugin");
Object.defineProperty(exports, "ModuleFederationPlugin", { enumerable: true, get: function () { return __importDefault(ModuleFederationPlugin_1).default; } });
//# sourceMappingURL=webpack.js.map

to:

var ModuleFederationPlugin_1 = require("./wrapper/ModuleFederationPlugin");
exports.ModuleFederationPlugin = ModuleFederationPlugin_1.default;

And now I can use a named import from my webpack config file:

import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";

To be honest, the original code seems alright, I am not sure why it's not working.

[patricklafrance]

The issue is with this line:

Object.defineProperty(exports, "ModuleFederationPlugin", { enumerable: true, get: function () { return __importDefault(ModuleFederationPlugin_1).default; } });

When replaced by either:

exports.ModuleFederationPlugin = __importDefault(ModuleFederationPlugin_1).default;

or:

Object.defineProperty(exports, "ModuleFederationPlugin", { enumerable: true, value: __importDefault(ModuleFederationPlugin_1).default });

It works as expected.

[patricklafrance]

I also added 3 CI builds to my reproduction repository showing that it's not working with either Node 20, 21 and 22:

• https://github.com/patricklafrance/mf-enhanced-import-webpack-plugin-issue/actions/runs/8857434064
• https://github.com/patricklafrance/mf-enhanced-import-webpack-plugin-issue/actions/runs/8857434059
• https://github.com/patricklafrance/mf-enhanced-import-webpack-plugin-issue/actions/runs/8857434065

[patricklafrance]

Closing as it's been fixed in https://github.com/module-federation/core/releases/tag/v0.1.11 🙏🏻