Mjml: Error when importing mjml2html in React.js

[joehartz]

Hello,

I'm trying to render mjml inside my React app.

Inside my react app i'm importing:
import { mjml2html } from 'mjml';

This is the error I get:

Critical dependencies:
79:45-62 the request of a dependency is an expression
 @ ./~/mjml-core/lib/parsers/config.js 79:45-62

I am using react-create-app as a boilerplate for the app. Which is already is using Webpack, Babel and ESLint under the hood.

Is this a side effect of using react-create app? Is there a simple way to tell that dependency I need to install?

PS: Thanks for the great work you guys have put into this!

[joehartz]

After taking a closer look the error was a little misleading to me. Apparently It's not a dependency problem but Webpack complaining 'request of a dependency is an expression'? I have not found a workaround yet or solution.

Reading through this thread I'm still a bit confused why webpack is not happy with importing/requiring mjml.

Here are the webpack docs about this error.

[iRyusa]

I think this might be an issue with the require of .mjmlconfig i'll take a look

On 11 Nov 2016, at 03:30, joehartz [email protected] wrote:

After taking a closer look the error was a little misleading to me. Apparently It's not a dependency problem but Webpack complaining 'request of a dependency is an expression'? I have not found a workaround yet or solution.

Reading through this thread I'm still a bit confused why webpack is not happy with importing/requiring mjml.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[mmazzarolo]

FYI I'm having the same issue on mjml > 3.0.0.
[email protected] works fine though.

[farhansalam]

Getting same warning. Any fix for this issue? I am using mjml: 3.3.0-beta.8.

[skoob13]

Having the same problem on 3.3.0.

[iRyusa]

Well little update here, the error comes from webpack build and keeping the project "buildable" for browser is quite a painful job. We're totally open to receive PR on this but we're not gonna take a look at this anytime soon.

So I'm closing this issue for now.

[ptbrowne]

For information, if you do not use custom components or custom config, you can use

    exprContextRegExp: /$^/,
    exprContextCritical: false,

in your webpack configuration. Source : https://webpack.js.org/configuration/module/#module-contexts

[AndreasFurster]

The same problem occurs with a basic Vue installation created with the Vue CLI. https://github.com/vuejs/vue-cli

There also occur some Cannot find module "fs" errors

[rubenkuipers]

Any updates regarding this issue?

[iRyusa]

👉 https://github.com/mjmlio/mjml/issues/438#issuecomment-302712905