reactjsnext.jsnodemailer

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
Solution

  • 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.