CODEWITHSUNDEEP
reactjsnext.jsnodemailer
jeho Ntanda
jeho Ntanda

Reputation: 71

nodemailer is giving errors in Nextjs app

i have built a simple mailing app using nextjs and nodemailer, while watching a youtube tutorial And i did exaclty everything in the tutorial, but i am getting errors i have no idea how to troubleshoot. below is my code, kindly help and advise on how i sholud go about these errors

import React, { useState } from "react";
import classes from './email.module.css'

const Email = () => {

    const [text, setText] = useState('')
    const handleClick = () => {
        const nodemailer = require('nodemailer')

        const transport = nodemailer.createTransport({
            service: 'hidden',
            port: 465,
            secure: true,
            auth: {
                user: 'hidden',
                pass: '********',
            },                      
        })

        const options = {
            from: 'hidden',
            to: 'hidden',
            subject: 'my test email',
            text: text
        }

        transport.sendMail(options, (err, info) => {
            if(err) {
                console.log('Error: ',err)
            }
            console.log('message sent: ', info.response)
        })
    }

  return (
    <div className={classes.cont}>
      <textarea value={text} onChange={(e) => setText(e.target.value)} className={classes.text}/>
      <button onClick={handleClick} className={classes.but}>send Email</button>
    </div>
  );
};

export default Email;

and below is my client console errors

next-dev.js?3515:32 ./node_modules/nodemailer/lib/dkim/index.js:10:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/nodemailer/lib/mailer/index.js
./node_modules/nodemailer/lib/nodemailer.js
./comp/Email.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
window.console.error @ next-dev.js?3515:32
handleErrors @ hot-dev-client.js?1600:117
processMessage @ hot-dev-client.js?1600:167
eval @ hot-dev-client.js?1600:29
eval @ websocket.js?a9be:58
handleMessage @ websocket.js?a9be:57
next-dev.js?3515:32 ./node_modules/nodemailer/lib/mailer/index.js:14:0
Module not found: Can't resolve 'dns'

Import trace for requested module:
./node_modules/nodemailer/lib/nodemailer.js
./comp/Email.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
window.console.error @ next-dev.js?3515:32
handleErrors @ hot-dev-client.js?1600:117
processMessage @ hot-dev-client.js?1600:167
eval @ hot-dev-client.js?1600:29
eval @ websocket.js?a9be:58
handleMessage @ websocket.js?a9be:57
next-dev.js?3515:32 ./node_modules/nodemailer/lib/mime-node/index.js:7:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/nodemailer/lib/mail-composer/index.js
./node_modules/nodemailer/lib/mailer/index.js
./node_modules/nodemailer/lib/nodemailer.js
./comp/Email.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
window.console.error @ next-dev.js?3515:32
handleErrors @ hot-dev-client.js?1600:117
processMessage @ hot-dev-client.js?1600:167
eval @ hot-dev-client.js?1600:29
eval @ websocket.js?a9be:58
handleMessage @ websocket.js?a9be:57
next-dev.js?3515:32 ./node_modules/nodemailer/lib/sendmail-transport/index.js:3:0
Module not found: Can't resolve 'child_process'

Import trace for requested module:
./node_modules/nodemailer/lib/nodemailer.js
./comp/Email.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
window.console.error @ next-dev.js?3515:32
handleErrors @ hot-dev-client.js?1600:117
processMessage @ hot-dev-client.js?1600:167
eval @ hot-dev-client.js?1600:29
eval @ websocket.js?a9be:58
handleMessage @ websocket.js?a9be:57
next-dev.js?3515:32 ./node_modules/nodemailer/lib/shared/index.js:7:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/nodemailer/lib/nodemailer.js
./comp/Email.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
window.console.error @ next-dev.js?3515:32
handleErrors @ hot-dev-client.js?1600:117
processMessage @ hot-dev-client.js?1600:167
eval @ hot-dev-client.js?1600:29
eval @ websocket.js?a9be:58
handleMessage @ websocket.js?a9be:57
next-dev.js?3515:32 ./node_modules/nodemailer/lib/shared/index.js:9:0
Module not found: Can't resolve 'dns'

Import trace for requested module:
./node_modules/nodemailer/lib/nodemailer.js
./comp/Email.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
window.console.error @ next-dev.js?3515:32
handleErrors @ hot-dev-client.js?1600:117
processMessage @ hot-dev-client.js?1600:167
eval @ hot-dev-client.js?1600:29
eval @ websocket.js?a9be:58
handleMessage @ websocket.js?a9be:57
next-dev.js?3515:32 ./node_modules/nodemailer/lib/smtp-connection/http-proxy-client.js:8:0
Module not found: Can't resolve 'tls'

Import trace for requested module:
./node_modules/nodemailer/lib/mailer/index.js
./node_modules/nodemailer/lib/nodemailer.js
./comp/Email.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
window.console.error @ next-dev.js?3515:32
handleErrors @ hot-dev-client.js?1600:117
processMessage @ hot-dev-client.js?1600:167
eval @ hot-dev-client.js?1600:29
eval @ websocket.js?a9be:58
handleMessage @ websocket.js?a9be:57
next-dev.js?3515:32 ./node_modules/nodemailer/lib/smtp-connection/index.js:6:0
Module not found: Can't resolve 'tls'

Import trace for requested module:
./node_modules/nodemailer/lib/smtp-pool/index.js
./node_modules/nodemailer/lib/nodemailer.js
./comp/Email.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found

Upvotes: 2

Views: 5700

Answers (4)

Dev Horia
Dev Horia

Reputation: 1

I've had the same problem in a helpers file I have created for NextJS 14. In the file I had mixed backend helper functions and frontend helper functions. As soon as I have separated backend and frontend functions the error was not present anymore. Of course, I have kept nodemailer into the backend helper functions file.

Upvotes: 0

LE BAF
LE BAF

Reputation: 1

Another solution I found was to use above the code when importing nodemailer, write 'use server', that 'fs' problem as I understand occurs because nodemailer works from the server side, not from the client side. In your case you should modularize the code to leave the nodemailer part aside without having to need useState since it does ask you to use 'use client', once you separate that you can solve the problem by placing 'use server'.

Upvotes: 0

Rob Antoine
Rob Antoine

Reputation: 21

I was getting this error too, even in app/[path]/route.js

To fix, I added the following to next.config.js

/** next.config.js - with Webpack v5.x */
module.exports = {

  ... other settings ... 

  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = {
      fs: false,
      net: false,
      dns: false,
      child_process: false,
      tls: false,
    };

    return config;
  },
};

Upvotes: 2

hangindev.com
hangindev.com

Reputation: 4873

nodemailer is a Node.js library and cannot be used in the client side. That's why you see the error Can't resolve 'fs'.

What you may do instead is to create an API route(which will be performed in the server side) and have the client app calls the API to perform the mailing task.

Upvotes: 4

Related Questions