__require.resolve is not a function

[Dricosta]

I am getting the following error in the console when trying to render the most basic example component

Uncaught TypeError: __require.resolve is not a function 
at node_modules/.pnpm/[email protected]/node_modules/uglify-js/tools/node.js (node.js:4:13)
    at __require2 (chunk-YJAH5SEO.js?v=1ec5a0f8:19:50)
    at node_modules/.pnpm/[email protected]/node_modules/html-minifier/src/htmlminifier.js (htmlminifier.js:8:16)
    at __require2 (chunk-YJAH5SEO.js?v=1ec5a0f8:19:50)
    at node_modules/.pnpm/@[email protected]_7tbcn2mecc3yvuxakflodiks3m/node_modules/@faire/mjml-react/utils/render.js (render.js:7:25)
    at __require2 (chunk-YJAH5SEO.js?v=1ec5a0f8:19:50)
    at render.js:30:18

I am using the version:
@faire/mjml-react: "^3.1.1"
node: 16.14.2
vite: "^4.0.4"

[IanEdington]

Thanks for reporting. It seems like an issue inside html-minifier.

You could try replacing the @faire/mjml-react/utils/render with this render function that doesn't use html-minifier.

import mjml2html from "mjml";
import { MJMLJsonObject, MJMLParseError, MJMLParsingOptions } from "mjml-core";
import React from "react";
import ReactDOMServer from "react-dom/server";

function renderToMjml(email: React.ReactElement): string {
  return ReactDOMServer.renderToStaticMarkup(email);
}

interface ConvertedHtml {
  html: string;
  json?: MJMLJsonObject;
  errors?: MJMLParseError[];
}

export function render(
  email: React.ReactElement,
  options: MJMLParsingOptions = {}
): ConvertedHtml {
  return mjml2html(renderToMjml(email), options);
}

[IanEdington]

@emmclaughlin I think we should try to get rid of html-minifier in version 4. Thoughts?

[emmclaughlin]

@emmclaughlin I think we should try to get rid of html-minifier in version 4. Thoughts?

I agree. The reason we kept it originally was to make migrating from v2 to v3 easier by not changing the render function. The long term goal would definitely be to allow the user to dictate if and how to minimize their HTML on their own.

[emmclaughlin]

As an added note to the previous answer, you may also have to use mjml-browser (https://www.npmjs.com/package/mjml-browser) instead of mjml. See this issue more discussion about mjml-browser vs mjml.

import mjml2html from "mjml-browser"; // This line is changed
import { MJMLJsonObject, MJMLParseError, MJMLParsingOptions } from "mjml-core";
import React from "react";
import ReactDOMServer from "react-dom/server";

function renderToMjml(email: React.ReactElement): string {
  return ReactDOMServer.renderToStaticMarkup(email);
}

interface ConvertedHtml {
  html: string;
  json?: MJMLJsonObject;
  errors?: MJMLParseError[];
}

export function render(
  email: React.ReactElement,
  options: MJMLParsingOptions = {}
): ConvertedHtml {
  return mjml2html(renderToMjml(email), options);
}