Run it inside of nextjs ─ is it possible?
matepaiva opened this issue · 3 comments
matepaiva commented
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 commented
daliusd commented
Closed as it is duplicate