Closed viktorkasap closed 1 year ago
This looks to me like it is coming from clean-css
, which is part of html-minifier
. This is used by the render function here. There is ongoing discussion about wether or not to pull html-minifier
out of mjml-react
in v4 as it causes many issues like these. But for now we chose to keep it as it was used in v2.
For the quickest resolution I would suggest trying to write your own render function that modifies the one provided and doesn't use html-minifier. There is an example here of one that doesn't use html-minifier.
Thank you for answer
I tried to create render.js file
import mjml2html from "mjml";
import React from "react";
import ReactDOMServer from "react-dom/server";
function renderToMjml(email) {
return ReactDOMServer.renderToStaticMarkup(email);
}
export function render(
email,
options= {}
) {
return mjml2html(renderToMjml(email), options);
}
But it doesn't help, maybe I'm doing something wrong...
Interesting, thank you for sharing the sandbox. It looks like html-minifier
is still installed by mjml
, which reminded me that mjml
is also meant to be used in a node.js environment, so it may be causing problems in your app. Instead of using mjml, try mjml-browser https://www.npmjs.com/package/mjml-browser
import mjml2html from "mjml-browser"; // This update should be the key to your fix
import React from "react";
import ReactDOMServer from "react-dom/server";
function renderToMjml(email) {
return ReactDOMServer.renderToStaticMarkup(email);
}
export function render(
email,
options= {}
) {
return mjml2html(renderToMjml(email), options);
}
You could also create an alias that maps mjml to mjml-browser, but that one line in the render should be the only place you need to replace it.
Yes! It works! Thank you so much 🙏
Happy to hear! You're welcome 🎉
Note: I am closing this but will be discussing better documentation/a better plan for handling mjml vs mjml-browsers for this project moving forward, so hopefully we can make this less confusing soon.
I've this error in Vite project
Steps: 1
npm create vite
-> React -> TypeScript+SWC (and without SWC) 2yarn add mjml mjml-react
3 Added this example to App.tsxResult