Run it inside of nextjs ─ is it possible?

[matepaiva]

Hi, first of all, thanks for the wonderful job!

I would like to use the mjml components whithin a next.js application, but when I try to run it as a page I get the error:

error - ./node_modules/clean-css/lib/reader/apply-source-maps.js:1:0
Module not found: Can't resolve 'fs'

I tried to disable js at client-side so it would only return HTML, but it doesn't make any difference.

// src/pages/newsletter.js
import MyMjmlComponent from 'components/mjml/MyMjmlComponent';
import { Mjml } from 'mjml-react';

export default function Newsletter() {
  return (
    <Mjml>
      <MyMjmlComponent timeline="hi" />
    </Mjml>
  );
}

export const config = {
  unstable_runtimeJS: false
};

I also could make it work by rendering using the next.js API. It works, but I lose a lot of good features, especially client hot reload on change:

import { render, Mjml } from 'mjml-react';
import { graphql } from 'relay-hooks';
import MyMjmlComponent from 'components/mjml/MyMjmlComponent';
import fetchQuerySSR from 'lib/fetchQuerySSR';

const query = graphql`
  query newsletterQuery {
    timeline(context: HOMEPAGE) {
      ...MyMjmlComponent_data
    }
  }
`;

export default async function newsletter(req, res) {
  const relayData = await fetchQuerySSR(query);

  const { html } = render(
    <Mjml>
      <MyMjmlComponent timeline={relayData.timeline} />
    </Mjml>,
    { validationLevel: 'soft', minify: undefined }
  );

  res.send(html);
}

Do you have any clue what I could do to make it work as a page? :)

Thank you!

[gajus]

See https://github.com/vercel/next.js/issues/7755#issuecomment-812805708

[vpontis]

This is a duplicate of #52

[daliusd]

Closed as it is duplicate