Webpack fails to compile after importing mjml2html

Hey there,

I’m running into an issue using mjml2html in a local Vue CLI 3 project (Vue CLI 3 runs on webpack). I’ve installed mjml - "mjml": "^4.2.0-beta.3" - and I’m importing the function as such - import mjml2html from 'mjml'. Once I’ve imported, my app breaks with the following warnings:

Warnings generated in terminal:

 warning  in ./node_modules/mjml-core/lib/index.js
Critical dependency: the request of a dependency is an expression
 warning  in ./node_modules/mjml-core/lib/helpers/mjmlconfig.js
Critical dependency: the request of a dependency is an expression
 warning  in ./node_modules/mjml-core/lib/helpers/mjmlconfig.js
Critical dependency: the request of a dependency is an expression
 warning  in ./node_modules/mjml-core/lib/helpers/mjmlconfig.js
Critical dependency: the request of a dependency is an expression
 warning  in ./node_modules/uglify-js/tools/node.js
Critical dependency: the request of a dependency is an expression

Warnings/error generated by the browser console:

I’ve also tried this using react (create-react-app), and I’m running into the same issue. Is anyone else experiencing this?

Any help would be greatly appreciated.

Reproduction Steps:

1. Generate a create-react-app, or Vue CLI 3 project
2. Install mjml - yarn add mjml
3. Import mjml2html anywhere in the project - import mjml2html from 'mjml'

MJML version:

"mjml": "^4.2.0-beta.3"

[svengau]

MJML uses html-minifier, which uses uglify-js, and uglify-js is not compatible with Webpack.

Related issue: https://github.com/mishoo/UglifyJS2/issues/3312

[Edit]: And I’ve finally found a workaround, thanks to this post: https://github.com/kangax/html-minifier/issues/727

rules: [
  // ... some rules
  {
    test: path.resolve(__dirname, 'node_modules/uglify-js/tools/node.js'),
    loader: 'null-loader',
  },
  // ...some more rules
]

[kmcb777]

@ShanakaNCG what is your problem exactly ? from what i read here, the problem was that he was trying to import mjml2html on the client side. This is not possible because mjml uses node libs, i.e. fs to handle mj-include. You have to use it server side, if you don’t have a node server you could use the api https://mjml.io/api