How to make react-email work with Next14
So, you've been hyped up by NextConf and shot straight to upgrading your startup's tech to Next14. But now, your build is crashing thanks to some react-email issues ('renderToReadableStream' is not exported from 'react-dom/server) Thanks to themendelson we have a quick patch to sort things out.
In your next.config.js you will have to add these imports:
const path = require("path");
const {
NormalModuleReplacementPlugin
} = require("webpack");
Now update your config with these webpack settings:
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
config.plugins = config.plugins || [];
config.plugins.push(
new NormalModuleReplacementPlugin(
/email\/render/,
path.resolve(__dirname, "./renderEmailFix.js")
)
);
// Important: return the modified config
return config;
},
};
module.exports = nextConfig;
Now create a new file (renderEmailFix.js) in your project root directory
// @ts-nocheck
const { renderToStaticMarkup } = require("react-dom/server");
module.exports.render = (component) => {
const doctype =
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
const markup = renderToStaticMarkup(component);
return `${doctype}${markup}`;
};
The build should work now! All credits for the solution go to themendelson.
