Mjml: Webpack fails to compile after importing mjml2html

[ryanpwaldon]

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"

[iRyusa]

Hi,

You should read this https://github.com/mjmlio/mjml/issues/438#issuecomment-302712905

PRs are welcome, but it takes too much time to have a browser build for us.

[ryanpwaldon]

No worries, that's all good. Thanks for the quick response 🙂

[ShanakaNCG]

Did you find the solution for vue issue @ryanpwaldon

[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

[ShanakaNCG]

@kmcb777 yeah. Unfortunately, we can not use this in vue. Thank you

[rosskevin]

I just bumped into the same thing trying to storybook our notifications....I was a bit surprised after the effort to storybook everything only to culminate in this.

I'll look at https://github.com/mjmlio/mjml/issues/438#issuecomment-302712905 and see if I can figure out an alternative.

[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

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

[osdiab]

@svengau i tried that workaround and it still is showing me this warning - i think that is probably not enough to make the warnings go away if it's possible to do so, since looking at one of the errors it shows this line:

options.skeleton = require(options.skeleton.charAt(0) === '.' ? _path2.default.resolve(process.cwd(), options.skeleton) : options.skeleton);

Looks like the library is doing this kind of dynamic require all over the place, though i still haven't got my Storybook to run with MJML at all so maybe you're referring to it making the runtime pass?

[osdiab]

@rosskevin did you ever figure out how to get storybook to work with MJML?

[felipellrocha]

Any progress on this? I just ran into this issue as well

[rosskevin]

@osdiab when ran a node process to render to html, then picked up the static HTML files as stories.

[probablyabear]

@rosskevin Can you explain in more detail how you picked up the static HTML as stories?

[rosskevin]

@probablyabear

1. node process generates a notifications.json file (our html notifications) that is a key/value map. The key is the notification code, the value is HTML as rendered from mjml.

Sample (abbreviated) notifications.json:

{
    "access_activated": "\n    <!doctype html>\n    <html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n</html>"
}

1. We run this code to pick up the static HTML from the json and generate stories:

import { Chromatic } from '@alienfast/ui-test'
import { storiesOf } from '@storybook/react'
import * as React from 'react'

const stories = storiesOf('notifications', module).addParameters(Chromatic.multi)
const renders = require('./__generated__/notifications.json')

for (const code of Object.keys(renders)) {
  stories.add(code, () => <div dangerouslySetInnerHTML={{ __html: renders[code] }} />)
}

I hope that helps.