0

I need to gather some information from a form and send it over email. Thanks to this article ( https://medium.com/@nickroach_50526/sending-emails-with-node-js-using-smtp-gmail-and-oauth2-316fe9c790a1) I can authenticate my gmail account with Oath2 and send an email by running node sendEmail.js.

However, when I wrap the script into a function and call it from a child component of my react.js app, i get the following error: 'TypeError: Cannot read property 'OAuth2' of undefined'.

None of the solutions found (e.g. https://github.com/googleapis/google-auth-library-nodejs/issues/355 or Google OAuth TypeError: Cannot read property 'OAuth2' of undefined) solve my problem.

This is my code:

sendEmail.js

export function sendEmail (eMailContent) {

  const nodemailer = require("nodemailer");
  const { google } = require("googleapis");
  console.log("google: ", google);
  const OAuth2 = google.auth.OAuth2;

  const oauth2Client = new OAuth2(
    "XXXXXX.apps.googleusercontent.com", // ClientID
    "XXXXXXX", // Client Secret
    "https://developers.google.com/oauthplayground" // Redirect URL
  );

  oauth2Client.setCredentials({
    refresh_token: "XXXXXXXX"
  });
  const accessToken = oauth2Client.getAccessToken()

  const smtpTransport = nodemailer.createTransport({
    service: "gmail",
    auth: {
        type: "OAuth2",
        user: "name@domain.com", 
        clientId: "XXXXXXXXXXXX.apps.googleusercontent.com",
        clientSecret: "XXXXXXXXXX",
        refreshToken: "XXXXXXXXXXXXXX",
        accessToken: accessToken
    }
  });

  const mailOptions = {
    from: "name@domain.com",
    to: "name@domain.com",
    subject: "something",
    generateTextFromHTML: true,
    html: eMailContent
  };

  smtpTransport.sendMail(mailOptions, (error, response) => {
    error ? console.log(error) : console.log(response);
    smtpTransport.close();
  });

}

childComponent.jsx

...
import { sendEmail } from '../sendEmail.js'

class childComponent extends Component {
  render() {
    ...
    }

    sendEmail(this.props.eMailContent)

    return (
      <div>

        ...

      </div>
    );
  }
}

export default childComponent;

And this are my dependencies:

"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"bootstrap": "^4.4.1",
"googleapis": "^47.0.0",
"jquery": "^3.4.1",
"node-sass": "^4.13.1",
"nodemailer": "^6.4.2",
"popper.js": "^1.16.0",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0"

traceback:

I've added console.trace(); inside the function, and this is the traceback:

sendEmail   @   sendEmail.js:8
render  @   ThanksModal.jsx:15
finishClassComponent    @   react-dom.development.js:18470
updateClassComponent    @   react-dom.development.js:18423
beginWork$1 @   react-dom.development.js:20186
beginWork$$1    @   react-dom.development.js:25756
performUnitOfWork   @   react-dom.development.js:24698
workLoopSync    @   react-dom.development.js:24671
performSyncWorkOnRoot   @   react-dom.development.js:24270
(anonymous) @   react-dom.development.js:12199
unstable_runWithPriority    @   scheduler.development.js:697
runWithPriority$2   @   react-dom.development.js:12149
flushSyncCallbackQueueImpl  @   react-dom.development.js:12194
flushSyncCallbackQueue  @   react-dom.development.js:12182
discreteUpdates$1   @   react-dom.development.js:24423
discreteUpdates @   react-dom.development.js:1438
dispatchDiscreteEvent   @   react-dom.development.js:5881

How can I call the mail script from my component?

Marcello
  • 173
  • 1
  • 15

0 Answers0