Mjml: Runtime error when mjml is bundled with webpack

[mdesousa]

We use webpack to bundle our code that depends on mjml.
During initialization the application throws this error:

TypeError: Cannot read property '1' of undefined
at map (dist/webpack:/node_modules/uglify-js/tools/node.js:20:19)
at Array.map ()
at Object.o (dist/webpack:/node_modules/uglify-js/tools/node.js:19:30)
at r (dist/webpack:/webpack/bootstrap:37:28)
at Object.o (dist/webpack:/node_modules/html-minifier/src/htmlminifier.js:8:16)
at r (dist/webpack:/webpack/bootstrap:37:28)
at Object.o (dist/webpack:/node_modules/mjml-core/lib/index.js:98:65)
at r (dist/webpack:/webpack/bootstrap:37:28)

The error seems to occur during the import of the html-minifier module.
We were able to work-around the issue by doing the following:

• Configure webpack to alias html-minifier to an empty module (see https://webpack.js.org/configuration/resolve/#resolvealias)
• Ensure that the minimize option is false when calling mjml2html

Note that simply disabling minimize is not sufficient since the error occurs in require("html-minifier").
It appears that this feature is going to be deprecated soon... accelerating that would eliminate this problem.
Another option would be to move the require to happen dynamically, if minify === true

[iRyusa]

Can you try to use mjml-browser package instead for now ?

[mdesousa]

It was actually one of the things that we looked into. However, mjml-browser is bundled to work on the browser and when we try to use it in node, it throws and error "window is undefined" (or something similar). Just for kicks, I tried to build it locally and set target="node" in the web.config... this results in an error during the build:

ERROR in index.js from UglifyJs
Unexpected token: keyword «const» [index.js:37593,0]
error Command failed with exit code 2.

[iRyusa]

You can just swap for mjml version on node side and mjml-browser for browser ?

It's a bit hard to have everything available for both environment as there's no unified API.

[mdesousa]

I only need it for node... the original issue was for mjml on node. The workaround that I described is solving my problem for now... just wanted to document the issue. Perhaps it could also be addressed by upgrading (or downgrading?) the reference to html-minifier in the project, but I didn't try that.

[iRyusa]

I'm not sure why would you need to bundle with webpack on a node project here then ?

[mdesousa]

It helps optimize cold start performance of lambda functions

[iRyusa]

Can you try to use mock like we use for Browser build here : https://github.com/mjmlio/mjml/blob/master/packages/mjml-browser/webpack.config.js#L36-L39 ?

[mdesousa]

As I mentioned in my original comment, that was the workaround that I used and solved the problem for me. I logged this issue to make you aware of the problem and consider either removing the dependency (it's flagged as deprecated), import it with a require only if the minimize flag is used, or upgrade to a version that wouldn't have this issue (don't know if it exists).

[iRyusa]

We still need to discuss on how we plan to keep the feature available for users easily and make it properly optional. As there's a workaround for now I'm closing it then

[jdrydn]

"minify" option is deprecated in mjml-core and only available in mjml cli.

It looks like minify is being removed in the core package - so we'll be able to roll MJML up with webpack soon!

Or, based off this comment you could move to html-minifier-terser?