privatenumber/esbuild-loader

ESBuildMinifyPlugin with format: iife breaks Webpack Module Federation

crutch12 opened this issue · 7 comments

crutch12 commented

Bug description

ESBuildMinifyPlugin with format: iife breaks Webpack Module Federation

Same error if you set format: iife in parent/child MF project.

Reproduction

With format: iife you get error after button click:
https://codesandbox.io/s/webpack-module-federation-forked-rcl1v3?file=/comic/webpack.config.js
image

Without format: iife you don't get error after button click:
https://codesandbox.io/s/webpack-module-federation-forked-c7fo45?file=/comic/webpack.config.js

Node.js package manager

npm

Environment

Checkout codesandbox

Can you contribute a fix?

  • I’m interested in opening a pull request for this issue.
grug commented

I'm also finding this problem, too

privatenumber commented

If it works without format: 'iife', why use it?

Also, not sure if this is a bug given esbuild-loader doesn't set or recommend format: 'iife'.

crutch12 commented

@privatenumber I don't want to have some global variables in window. I've got a bug with window._ intersection before...

  • 👍1
privatenumber commented

Are you using the minifier to transpile?

I'm not familiar with Module Federation but if you open a PR with a failing test I can take a look.

crutch12 commented

Sorry, I can't

crutch12 commented

Quick fix: exclude remoteEntry.js from minification.

format: 'iife',
exclude: /remoteEntry(.*)\.js$/,

The reason

Here is the typical remoteEntry.js, generated by WMF

var ApplicationName;
/******/ (() => { // webpackBootstrap


// ...


/******/ 	ApplicationName = __webpack_exports__;
/******/ 	
/******/ })()

When you enable format: 'iife', then ESBuildMinifyPlugin minificates all files with iife, including your remoteEntry.js

(() => { // this is iife
var ApplicationName;
// ...
})()

Now WMF initializes and tries to get window.ApplicationName and gets nothing.

  • 👍1
crutch12 commented

Are you using the minifier to transpile?

I didn't know but used it as transpiler :)
I missed node_modules when was building with esbuild-loader
And then minifier transpiled my ...spread syntax with global functions.

So it's okay to run without iife, but you should transpile all .js like files like this:

{
  // test: /\.tsx?$/, // doesn't transpile node_modules .js/.cjs/.mjs/etc.
  test: /\.[cm]?[jt]sx?$/,
  loader: 'esbuild-loader',
  options: {
    loader: 'tsx',
    target: 'es2015',
  },
},