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

[Varkoff]

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)

[psugihara]

Hey @Varkoff! Thanks for trying out mailing, sorry you encountered an issue but we'll try to help you get back up and running.

What does you emails/index.ts look like?

Also getting a copy of your mailing.config.json would be useful.

A minimal repo that repros this would be incredibly helpful if you have time. Otherwise, I'm hoping I'll be able to repro with the above info.

[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;

[psugihara]

vinylmania.fr looks really cool! I'm going to try to repro this today.

[alexfarrill]

Hey @Varkoff , Peter and I tried to reproduce the error by running the end-to-end tests that install mailing into a fresh install of remix using remix-run/indie-stack and using the index.ts you sent, but SMTP_PORT=465 npx mailing runs fine for us with that basic setup. (It installs react 18.2.0 too)

To continue to diagnose: I don't see node-modules-polyfillscrypto in our yarn.lock. Could you share your package.json or yarn.lock?
Or do you know what library is adding that polyfillscrypto dependency?

Thanks!

Alex

[alexfarrill]

@Varkoff if it's easier to debug over a zoom/hangout, feel free to book a time on my calendly: https://calendly.com/afarrill/30min?month=2022-10

[kin-nex]

FWIW, I'm also facing this issue (also running a Remix app). Here's my package.json

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "deploy": "fly deploy --remote-only",
    "dev": "remix dev",
    "start": "remix-serve build"
  },
  "prettier": {
    "tabWidth": 2,
    "semi": false,
    "trailingComma": "es5",
    "singleQuote": true
  },
  "dependencies": {
    "@emotion/cache": "^11.10.3",
    "@emotion/react": "^11.10.4",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.4",
    "@mui/material": "^5.10.5",
    "@remix-run/node": "^1.7.1",
    "@remix-run/react": "^1.7.1",
    "@remix-run/serve": "^1.7.1",
    "date-fns": "^2.29.3",
    "mailing": "^0.8.13",
    "mailing-core": "^0.8.13",
    "mjml-react": "^2.0.8",
    "nodemailer": "^6.8.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "tiny-invariant": "^1.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.7.1",
    "@remix-run/eslint-config": "^1.7.1",
    "@types/eslint": "^8.4.6",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "eslint": "^8.23.1",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "prettier": "^2.7.1",
    "typescript": "^4.7.4"
  },
  "engines": {
    "node": ">=14"
  }
}

The error is from posthog-node which looks to be a dependency of mailing and mailing-core

[psugihara]

Thanks @ESalih-Dev will try to repro with your package.json. What OS and package manager are you using?

[a-hariti]

@ESalih-Dev, Did you find a solution yet?

[kin-nex]

Thanks @ESalih-Dev will try to repro with your package.json. What OS and package manager are you using?

@ESalih-Dev, Did you find a solution yet?

Apologies guys, I ended up not using this package because of all the mjml-react stuff it required.

FWIW @psugihara, I was using OS was MacOS Monterey 12.6, package manager was npm 8.50.

[psugihara]

No worries, thanks for following up. What did you end up using?

[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";

[psugihara]

Ah, great investigation @a-hariti, glad you got it working. Thanks for sharing. I bet we could do this automatically in init if we detect a remix project. At the very least it would be worth doccing this in a remix specific guide on the docs site (I can take that).

[a-hariti]

Yes, that would clear the confusion.

Keep up the good work 🎉