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.

How to make react-email work with Next14

Subscribe to my newsletter

Ramadan Omar

Ramadan Omar