Send Emails with NestJS

[utterances-bot]

Send Emails with NestJS

Create Email Templates and send them with nodemailer from your Nest application

https://notiz.dev/blog/send-emails-with-nestjs

[keithhuels]

I am getting an exception : "Cannot destructure property 'templateName' of 'precompile(...)' as it is undefined. Any idea what to do?
Only thing I've found on Google after hours of looking is to try and add "./" before the template name in mail.module.ts

[abenezer-ayalneh]

I don't know if this helps or not but the name of my template file was 'hello.mail.hbs' and I got the same error as you did. Then I removed the middle '.mail' part and it stated working. So if you have the same thing maybe try that.

[tejo-ak]

The same error: "Cannot destructure property 'templateName' of 'precompile(...)' as it is undefined
So frustrating since the error message doesn't help

[marcjulian]

Do you have a repo to reproduce this error? Does this error occure in this example https://github.com/notiz-dev/nestjs-mailer for you as well?

[marcjulian]

I found this issue nest-modules/mailer#570, are you using @nestjs-modules/[email protected]? Try out version 1.5.1 until the issue is fixed for the new version.

@keithhuels as you mentiond adding ./ before the template name is curretly the workaround for the 1.6.0 version nest-modules/mailer#550 (comment)

[alichampion]

Downgrading @nestjs-modules/[email protected] to 1.5.1 has worked for me 😊

[amtarunsingh]

Cuurently on version, ^1.9.1, getting the erro TypeError: Cannot destructure property 'templateName' of 'precompile(...)' as it is undefined. at HandlebarsAdapter.compile (C:\internship\vlsiSociety\membership\vlsi-membership-project\node_modules\@nestjs-modules\mailer\dist\adapters\handlebars.adapter.js:50:17
Code is as same as the above, and nest-cli.json looks like
"compilerOptions": { "assets": [ { "include": "mail/template/**/*", "outDir": "dist/src" } ], "watchAssets": true, "deleteOutDir": true }
Can you please help what do to?

[ehtashamNetixsol]

Same error.

[parideis]

There is a comma "," missing in the compiler options. (In the article)
Thanks for the article! :)

  "compilerOptions": {
    "assets": ["mail/templates/**/*"] // 👈 missing comma
    "watchAssets": true
  }

[keithhuels]

Yes, it works now that I put "./" in front of the specific template I am using in the mail service.

[keithhuels]

Another quick note, you have a "USER_FROM" in the .env file but it's not being used in the service. I believe it should be:

from: "No Reply" <${config.get('MAIL_FROM')}>,

[marcjulian]

Thanks @parideis and @keithhuels for spotting, I updated the article!

[no-on3]

if you're using EJS, make sure you set the strict mode to false in the config,
else you'll always get undefined variable in ejs template
or use locals variable : <%= user %> becomes <%= locals.user %>

[vprazuck]

Try this in your mailservices.ts template: './templates/confirmation'
Refer the location of the template you want to send.

[justDare]

First off, great tutorial! I followed it start to finish with no hiccups. Have you found a way to include template styling other than inlining them (partials, linking to static assets, etc.)?

[marcjulian]

@justDare checkout Send mail with maizzle for theming.

[Grimmig18]

Hi,
first of, great job with the blog post, following the steps has been really easy and everything works as expected!

I do have one question though: Is there a way to separate out styling files (.css) or do I have to define styling in the handlebars files? I tried extracting the styling in a style.css file in the same directory as the handlebars file, but it seem like it isn't resolved properly. I have checked, that the .css file is also transported into the dist folder.

[marcjulian]

@Grimmig18 checkout Send mail with maizzle for theming.

[Anesca38]

Hi,
thanks for that tutorial !

I'm having some trouble with the template part of things though.

first of template seems to not go where they would be supposed to in the dist folder. it comes out as :

Dist
|-mail/templates
|-src
|-mail/mail.module.js

Wich is kinda strange, and not consistent with what you've got on the tutorial.
Because of that i've got the "Cannot destructure property 'templateName' of 'precompile(...)' as it is undefined." error but adding the "./" to template doesn't change a thing.

I've tried tinkering around with no luck :/

[ldulcic]

I had a problem where templates where copied to dist folder instead of dist/src.
I updated nest-cli.json to make it work:

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [{ "include": "mail/templates/**/*", "outDir": "dist/src" }],
    "watchAssets": true
  }
}

outDir tells compiler to copy templates to src folder, it works now.

[kayode-adechinan]

Saved my day! Thanks

[marcalj]

Thanks! With latest versions I needed to remove ./ when defining the template name. Just in case anyone keeps seeing the "Cannot destructure property... error. Thanks for your help!!! :-D

[Anesca38]

I had a problem where templates where copied to dist folder instead of dist/src.
I updated nest-cli.json to make it work:

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [{ "include": "mail/templates/**/*", "outDir": "dist/src" }],
    "watchAssets": true
  }
}

outDir tells compiler to copy templates to src folder, it works now.

Thanks a lot !

[pbalan]

Hi, can you tell me how I could go about testing the mail module?
I am pulling the mail.module as dependency to auth.module but I get some errors:

Nest can't resolve dependencies of the MailerService (?, MAILER_TRANSPORT_FACTORY).

Please make sure that the argument MAILER_OPTIONS at index [0] is available in the RootTestModule context.

    Potential solutions:
    - If MAILER_OPTIONS is a provider, is it part of the current RootTestModule?
    - If MAILER_OPTIONS is exported from a separate @Module, is that module imported within RootTestModule?
      @Module({
        imports: [ /* the Module containing MAILER_OPTIONS */ ]
      })

Here's the code excerpt:

import { MailService } from '../mail/mail.service';

@Injectable()
export class AuthService {
  constructor(
    private usersService: UsersService,
    private jwtService: JwtService,
    private mailService: MailService,
  ) {}

[mortocks]

Having the same issue - I know it's because I've done something wrote with the IOC but struggling to workout the issue

[naumanahmed19]

facing same issue fixed by importing ConfigModule under MailerModule
MailerModule.forRootAsync({
imports: [ConfigModule], //

[rabbygit]

I am facing a weird error. When I provide credentials from environment I am getting this error
Error: Invalid login: 535-5.7.8 Username and Password not accepted.
But If I provide hard coded credentials , mail is sent successfully.

export const mailConfig = {
useFactory: async () => ({
imports: [ConfigModule],
inject: [ConfigService],
transport: {
service: 'gmail',
secure: false,
auth: {
user: process.env.MAIL_USER,
pass: process.env.MAIL_PASSWORD,
},
},
defaults: {
from: '"No Reply" <noreply@stock_house.com>',
},
template: {
dir: join(__dirname, '../mail/templates'),
adapter: new HandlebarsAdapter(), // or new PugAdapter() or new EjsAdapter()
options: {
strict: true,
},
},
})
};

[marcjulian]

Have you tried it with the ConfigService instead of process.env.MAIL_USER?
See if this helps: https://notiz.dev/blog/send-emails-with-nestjs#move-configurations-to-dotenv-file

[rabbygit]

Thank you. I also tried this way but the result is the same.

[mortocks]

Having trouble with testing like @pblan above. I've followed the same code example in the blog post but then made this basic test spec.

// mail.service.spec.ts
import { Test, TestingModule } from '@nestjs/testing';
import { MailService } from './mail.service';
import { MailerModule } from '@nestjs-modules/mailer';

describe('MailService', () => {
  let service: MailService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      imports: [MailerModule],
      providers: [MailService],
    }).compile();

    service = module.get<MailService>(MailService);
  });

  it('should be defined', () => {
    expect(service).toBeDefined();
  });
});

I get the dreaded

Nest can't resolve dependencies of the MailService (?). Please make sure that the argument MailerService at index [0] is available in the RootTestModule context.

    Potential solutions:
    - If MailerService is a provider, is it part of the current RootTestModule?
    - If MailerService is exported from a separate @Module, is that module imported within RootTestModule?
      @Module({
        imports: [ /* the Module containing MailerService */ ]
      })

I've tried various things like including Handbars and path in the imports section (although I don't think they are required) without much success. Any help would be appreciated

[Astarosa]

I have the same problem and i tried hours to find a solution...

[Astarosa]

Resolved for me. Import your MailModule from your mail.module instead of MailerModule and it work fine.

[mortocks]

Thanks @Astarosa . Can confirm this fixed the issue. Updated working example below

import { Test, TestingModule } from '@nestjs/testing';
import { MailService } from './mail.service';
import { MailModule } from './mail.module';

describe('MailService', () => {
  let service: MailService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      imports: [MailModule],
      providers: [MailService],
    }).compile();

    service = module.get<MailService>(MailService);
  });

  it('should be defined', () => {
    expect(service).toBeDefined();
  });
});

[micaelparadox]

Cool

[klaemongkoln]

What path do I have to shoot to test?

[Mayvis]

I got an issue:
TypeError: Cannot destructure property 'templateName' of 'precompile(...)' as it is undefined.

And I watched an error message and found the compile path is not correct.
It should be dist/src/email/template not dist/email/template.

Instead of using

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": ["mail/templates/**/*"], 
    "watchAssets": true
  }
}

You can specify the path like below, and it work for me.

{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "assets": [
      {
        "include": "mail/template/**/*",
        "outDir": "dist/src"
      }
    ],
    "watchAssets": true
  }
}

Hope this can help.

[dactue1006]

Nice article

[huykon]

I am facing with issue on localhost

{
  "errno": -3008,
  "code": "EDNS",
  "syscall": "getaddrinfo",
  "hostname": "smtp.example.com",
  "command": "CONN"
}

[SamboSovan011]

Hello,

I got this error: /home/sambo/Developments/flashsapp_backend/node_modules/mailparser/node_modules/html-to-text/lib/html-to-text.cjs:1838
tableToString: (rows) => tableToString(rows, formatOptions.rowSpacing ?? 0, formatOptions.colSpacing ?? 3),

[huykon]

How to handle the confirmation email after user click to confirm button at their email?

[marcjulian]

You could add a link to your Web UI to handle the confirmation. In the UI you could perform the validation against the API and show the user the result or redirect, depending on your use case.

[huykon]

Thank @marcjulian I done it

[dingsheng1214]

hello

[midblep]

This is awesome, big thanks for the nice and understandable step-by-step snippets :)

[amtarunsingh]

Currently on the version, ^1.9.1.
Code is as same as the above, and nest-cli.json looks like

TypeError: Cannot destructure property 'templateName' of 'precompile(...)' as it is undefined. at HandlebarsAdapter.compile (C:\internship\vlsiSociety\membership\vlsi-membership-project\node_modules\@nestjs-modules\mailer\dist\adapters\handlebars.adapter.js:50:17

"compilerOptions": { "assets": [ { "include": "mail/template/**/*", "outDir": "dist/src" } ], "watchAssets": true, "deleteOutDir": true }
Can you please help what do to?

[amtarunsingh]

Error: TypeError: Cannot destructure property 'templateName' of 'precompile(...)' as it is undefined. at HandlebarsAdapter.compile (C:\internship\vlsiSociety\membership\vlsi-membership-project\node_modules\@nestjs-modules\mailer\dist\adapters\handlebars.adapter.js:50:17
Currently on the version, ^1.9.1 of the mailer module.
Code is as same as the above.

And after looking at a solution, currently the nest-cli.json looks like the below but still the same error, earlier it was same as the above code and was getting the same error.
"compilerOptions": { "assets": [ { "include": "mail/template/**/*", "outDir": "dist/src" } ], "watchAssets": true, "deleteOutDir": true }
Can you please help what do to?

[ehtashamNetixsol]

bro i am having the same error. can anyone help?

[ehtashamNetixsol]

I am getting the same error in sep 2023. it says

TypeError: Cannot destructure property 'templateName' of 'precompile(...)' as it is undefined.

i have tried everything. file structure is like this. src/templates/acton.hbs

below is my nest.cli.json
"compilerOptions": {
"assets": [
{
"include": "templates/**/*",
"outDir": "dist/src"
}
],
"watchAssets": true,

this is app.module.ts
MailerModule.forRootAsync({
useFactory: async () => ({
transport: 'smtps://[email protected]:[email protected]',
defaults: {
from: '"nest-modules" [email protected]',
},
template: {
dir: '/src/templates',
adapter: new HandlebarsAdapter(),
options: {
strict: true,
},
},
}),
}),

this is mailing.service.ts
this.mailerService
.sendMail({
transporterName: 'gmail',
to: '[email protected]',
from: this.configService.get('EMAIL'),
subject: 'Verfication OTP',
template: './acton',
context: {
code: '38328',
},
})
.then(() => {
console.log('email sent');
})
.catch((err) => {
console.log(err);
});

[Boye-dev]

Did you solve this error?