No matching export in node-modules-polyfillscrypto for import createHash with latest version

Hello. I have updated my Remix app (indies-stack) dependencies and came across this error message : No matching export in node-modules-polyfillscrypto for import createHash upon building the application or starting the development environment. Going back to version 0.7.0 of mailing and mailing-core didn’t trigger the error.

I do not use crypto in my code.

(This is my first issue, forgive me if I do not provide enough details)

[Varkoff]

Hi @psugihara, I have tried to recreate the issue, without success. I am using React@18.2.0 btw. I have seen a notice on the terminal specifying the peer-deps of mjml-react, and react-reconciler needed 17.0.0.

I am using mailing for my Vinylmania.fr project.

 /* mailing.config.json */
{
  "typescript": true,
  "emailsDir": "./emails",
  "outDir": "./previews_html",
  "anonymousId": "c4eb5ec8-3a15-4cd8-9254-19e19a1a652b"
}

/* emails/index.ts */
import nodemailer from "nodemailer";
import { buildSendMail } from "mailing-core";
import invariant from "tiny-invariant";

invariant(process.env.SMTP_PORT, "SMTP_PORT is not set");
const transport = nodemailer.createTransport({
  pool: true,
  host: process.env.SMTP_HOST,
  port: Number(process.env.SMTP_PORT),
  secure: true, // use TLS
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASSWORD,
  },
});

// @ts-ignore
const sendVinyleMail = buildSendMail({
  transport,
  defaultFrom: `Vinylmania <${process.env.SMTP_SENDER}>`,
});

export default sendVinyleMail;

[a-hariti]

I found a solution, posting here to save someone some time in the future.

This is a Remix issue not Mailing’s.

The gist of it is that Remix has the concept of server vs client bundles. When in doubt it tries to make the code work for both, that’s why it’s trying to polyfill node:crypto for the borowser.

One way to tell it that this email stuff is purely a server’s business, one should name the file [name].server.ts as per the docs: https://remix.run/docs/en/v1/pages/gotchas#server-code-in-client-bundles.

In my case, I kept all of my code the same, exept that in the emails folder I have the structure:

app/emails
├── index.ts
├── previews
├── emails
└── sendEmail.server.ts

the "server" in sendEmails.server.ts deals with the issue, and the index.ts file gives me nice imports.

// app/emails/index.ts
export { default } from "./sendEmail.server";