Example from readme not working

[erikmeliska]

Hi there,

I've been trying to integrate the renderHtmlDocument method from your repository into my project but haven't had any luck. It appears that this method isn’t actually available in the repository. I might be overlooking something, but I couldn’t find it in the codebase.

Additionally, I attempted to implement it on the server but faced similar issues. Could you please confirm if this method is part of an upcoming release? Access to it would indeed be very beneficial for my needs.

Thank you for your assistance!

import { renderHtmlDocument } from '@usewaypoint/email-builder';
import nodemailer from "nodemailer";

// Replace this with your transport configuration
const transportConfig = {}
const transporter = nodemailer.createTransport(transportConfig);

// Replace this with the JSON for your Reader document
const CONFIGURATION: TReaderDocument = {}

await transporter.sendMail({
  from: 'no-reply@example.com'
  to: 'friend@example.com',
  subject: 'Hello',
  html: renderHtmlDocument(CONFIGURATION, 'root'),
});

[ljacho]

+1

[jordanisip]

Hi @erikmeliska and @ljacho, thanks for reporting!

Sorry for the confusion – you're right, it turns out we were referencing the incorrect method name in the docs.

This has been fixed in #89 and you can see the latest here: https://github.com/usewaypoint/email-builder-js?tab=readme-ov-file#sending-through-nodemailer

[erikmeliska]

Thanks for reply!
I figured, that it would be this, but still, I can't make it work from server side, since it is using client features (hooks, libs) everywhere.
Can you provide some working example, how to render json to html so that I can send it from the server?

[cohitre]

We are investigating the issue with server side rendering. Out of curiosity, are you using this within NextJS?

[erikmeliska]

Tried both, nextjs, and raw node

[cohitre]

Thanks @erikmeliska. I was able to reproduce your issue and we are working on a fix that should be released within the next week.

[cohitre]

We just released version 0.0.4 of @usewaypoint/email-builder which adds react-dom as a peer dependency and fixed this issue in some environments.

[HadiAlMarzooq]

@erikmeliska @ljacho

Hey guys, I'm using this method to integrate it with the emails generated via this builder which works fine for me, this method does not depend on @usewaypoint/email-builder
First, import dependencies via:

const nodemailer = require("nodemailer");
const fs = require("fs");
const path = require("path");

Then read the .html template via:

  const templatePath = path.resolve(
    __dirname,
    "../templates/email_template.html"
  );
  const emailTemplate = fs.readFileSync(templatePath, "utf-8");

And the mail options as follow:

  let mailOptions = {
  from: process.env.EMAIL,
  to: email,
  subject: subject,
  html: emailTemplate, 
};

then send using:

await transporter.sendMail(mailOptions);

[erikmeliska]

Thanks @HadiAlMarzooq,
I don't have problems with sending already rendered html.
The problem is how to get this html rendered in the first place.

[erikmeliska]

Guys, help me out here, I did all, possible and impossible, and I still can't make it work on node.
What I did:

• created clean node project (yarn init)
• imported library (yarn add @usewaypoint/email-builder)
• created index.js with the simplest proof that it works:

import { renderToStaticMarkup } from '@usewaypoint/email-builder';

const SIMPLE = {}

const html = renderToStaticMarkup(SIMPLE, {
  rootBlockId: 'root'
});
console.log(html)

node index.js

I get errors about

(node:27368) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

So I add "type": "module" to package.json, no the error is:

import { renderToStaticMarkup } from '@usewaypoint/email-builder';
^^^^^^^^^^^^^^^^^^^^
SyntaxError: Named export 'renderToStaticMarkup' not found. The requested module '@usewaypoint/email-builder' is a CommonJS module, which may not support all module.exports as named exports.

So I do as suggested in the error message:
import pkg from '@usewaypoint/email-builder';
const { renderToStaticMarkup } = pkg;

Now I get

(node:30430) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
/Users/ericsko/Projekty/_Sandbox/email-builder-node/node_modules/@usewaypoint/email-builder/dist/index.js:1
export { default as renderToStaticMarkup } from './renderers/renderToStaticMarkup';
^^^^^^

SyntaxError: Unexpected token 'export'

Going in circles..
So I go to approach 2:

Install babel and try to compile it instead of changing type.
Result is pretty much the same.

So I go to approach 3:

Install typescript
Result the same.
Install babel on top
Result the same.

Here is my odyssey trying to get some help from the artificial brain, if someone is interested: :D
https://chat.openai.com/share/27c76a65-8c6c-471b-a746-2c54e987c19e

So, can somebody show me how to make this work in the simplest environment (ideally only with js)?

Thank you.

[ljacho]

@cohitre , @erikmeliska I have tried several options as well, ended up creating the simplest possible showcase using TS: email-builder-test

unfortunately it seems that lib is not build like it supposed to be and it doesn't work