emailjs-com / emailjs-sdk Goto Github PK

Maybe it's not intended to, but I tried to do it

I tried to use Emailjs it's worked few days after that i am getting an empty message on my gmail. Am not getting the value however the value does appeared on console.

Here is my code

const sendEmail = (e) => {
e.preventDefault();
e.persist()
emailjs.sendForm('service_8jm5f8j', 'template_e03mbft', form.current, 'UcNalsETTIlfLzIn0')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
};

<form className="theme-form" ref={form} onSubmit={sendEmail}>
              <div className="form-group">
                <div className="row">
                  <div className="col-sm-12 col-md-6 md-fgrup-margin">
                    <input
                      type="text"
                      className="form-control"
                      placeholder="your name"
                      required="required"
                      name="full_name"
                    />
                  </div>
                  <div className="col-sm-12 col-md-6">
                    <input
                      type="number"
                      className="form-control"
                      placeholder="phone"
                      required="required"
                      name="first_name"
                    />
                  </div>
                </div>
              </div>
              <div className="form-group">
                <input
                  type="email"
                  className="form-control"
                  id="exampleFormControlInput1"
                  placeholder="email address"
                  required="required"
                  name="email"
                />
              </div>
              <div className="form-group">
                <textarea
                  className="form-control"
                  id="exampleFormControlTextarea1"
                  rows="4"
                  placeholder="message"
                  required="required"
                  name="message"
                ></textarea>
              </div>
              <div className="form-button">
                <button
                  type="submit"
                  className="btn btn-custom theme-color"
                >
                  send
                </button>
              </div>
            </form>

Hello,

I tried to update emailjs to v3.1.0 and I get an error:
Cannot use import statement outside a module

Am I doing anything wrong or do you know what could be the issue?

Thanks

I am using node version 14.x
it's not supported in the production, working locally fine
please make support to node14.x
I am getting this
error @emailjs/[email protected]: The engine "node" is incompatible with this module. Expected version ">=16.0.0". Got "14.18.1"

Hi there,

Version 3.x causes runtime error with IE11 probably because of the transpiler settings.
Is it possible to make the SDK compatible with IE11?

We're trying to send e-mails that contain Variable file attachments.
From our React code we're able to add the attachment.
In the Mail client on OS X all seems to work fine, however on some other clients, such as the Mail app on iPhone, only an attachment icon is shown be the e-mail doesn't contain a visual indication of the pdf file.

The start of the pdf blob:

const data  = 'data:application/pdf;base64,JVBERi0xLjMKJf////8KOCAwIG9iago8PAovVHlwZSAvR...'

emailjs.send('serviceNumber', 'templateNumber', {
                    to: '[email protected],
                    variable_38s435h: data,
                  })
                    .then((result) => {
                      console.log(result.text);
                    }, (error) => {
                      console.log(error.text);
                    });

The new google recaptcha v3 had been available for a while now and I was wondering if there is a plan to integrate support for that when using the emailjs.send in the client.

This is what I'm trying to import.

And these are the errors I'm getting:

/home/kmk/sra/sra-website/node_modules/emailjs-com/es/index.js:1
import { init } from './methods/init/init';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at eval (webpack-internal:///emailjs-com:1:18)
    at Object.emailjs-com (/home/kmk/sra/sra-website/.next/server/pages/contactus.js:138:1)
    at __webpack_require__ (/home/kmk/sra/sra-website/.next/server/pages/contactus.js:23:31)

On my local host (server side) I can have a /secrets/vars folder in my project which contain my emailj sensitive variables without exposing them to the world.

I am hosting a website on heroku, but I cant seem to get those variables onto my client side without hardcoding the variables. I dont see any demo in the docs regarding this

I have a booking form I created with Formik and when I log the values, I see all of them in the console but once I receive the email, it gives me only three values

I'm using node version 15 (and running with Typescript) and when I use emailjs-com version 3.1.0 I get this error. I tried almost everything to try and resolve it even removing eslint but the issue persisted
Node.js: SyntaxError: Cannot use import statement outside a module

The solution I resorted was to use an older version so I think the issue is due to the latest version

When I installed outlook service emails are not going through, I can see them in the emailJS application like they are sent but I don't receive them. Then I made a new Gmail service and set up an email template for the same initial outlook email that worked fine but now I'm using Gmail as a service to receive mail on outlook... There are some troubles with the outlook service.

Good evening. Had an issue crop up with the @emailjs/browser package.

ReferenceError: XMLHttpRequest is not defined at /workspace/node_modules/@emailjs/browser/cjs/api/sendPost.js:8:21

I had previously fixed this with a var XMLHttpRequest = require("xhr2").

However the project has been migrated to Google Cloud and GCloud will not allow modified packages

I'm getting the following error when trying to implement emailjs in my web app. I'm using vanilla JS - not using any frameworks. I only have one html file and a script.js file.

Here is the code:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sending Email with JS - Example</title>
    <script src="script.js" type="text/javascript"></script>
    <script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
  </script>
  <script type="text/javascript">
    (function () {
      emailjs.init('MLn310qC-i1ubnaiQ');
    })();
  </script>

</head>
<body>
    <form id="contact-form">
        <input type="hidden" name="contact_number">
        <label for="name">Your Name</label>
        <input class="name" name="from_name" type="text">
        <br>
        <label for="email">Your email address</label>
        <input id="email" name="email" type="email">
        <br>
        <label for="message">Message</label>
        <textarea id="msg" name="message" cols="5" rows="5" placeholder="Enter your msg.."></textarea>
        <br>
        <button type="submit" onclick="SendMail()">Send</button>
    </form>
</body>
</html>

Script.js

function SendMail(){
    var params = {
        from_name : document.getElementById("from_name").value,
        email_id : document.getElementById("email_id").value,
        message : document.getElementById("msg").value
    }

    emailjs.send("service_kj2sim3","template_4bia257", params).then(function (res){
        alert("Operation code: ", res.status);
    })
}

I am facing this issue on React (Next.js) and emailjs-com. I am trying to replicate the example given on EmailJS website

/Users/ma/work/rkcSwissNextJS/node_modules/emailjs-com/es/index.js:1
import { init } from './methods/init/init';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:355:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.emailjs-com (/Users/ma/work/rkcSwissNextJS/.next/server/pages/apply.js:66:18)
    at __webpack_require__ (/Users/ma/work/rkcSwissNextJS/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/apply.js:19:70)
    at Object../pages/apply.js (/Users/ma/work/rkcSwissNextJS/.next/server/pages/apply.js:44:1)
    at __webpack_require__ (/Users/ma/work/rkcSwissNextJS/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/ma/work/rkcSwissNextJS/.next/server/pages/apply.js:186:52)
    at /Users/ma/work/rkcSwissNextJS/.next/server/pages/apply.js:187:238
    at Function.__webpack_require__.X (/Users/ma/work/rkcSwissNextJS/.next/server/webpack-runtime.js:116:21)

I think this is not entirely related to emailjs.

We have a form with mandatory fields but this is just the default html e.g.

People still able to submit a form with empty fields.

This emailjs form was implemented with react onSubmit prop.

onSubmit prop only fire if all the mandatory fields are filled and valid.

We rarely receive this empty submissions. but, curious if there's workaround for it?

Thanks

The problem is the following when importing emailjs from emailjs-com throws the following error "Cannot use import statement outside of a module"

I am using NextJS and as a Javascript language.

Code of importation:

Error:

Hi,

I am trying to use the emailjs-sdk v2.6.4 and setting up the From Name via a viariable with a name like John's Guam is just giving me s Guam.

I can conclude that the apostrophe is killing the string, wonder if that my be prone to security issue as well.

Anyway can someone look into this ? in the mean time I can just rename my clients From Email to "Johns Guam".

Here is a screenshot of my Gmail inbox after sending the message:

Was under the impression I could use the SDK from node... but running into a lot of errors that suggest it's designed exclusively for the browser.

Thanks for any guidance.

I'm using the @emailjs/browse (3.7.0) with react (17.0.2) + typescript (4.6.2).

After I sent an email I'm receiving this error message:

The weird part is: the email is being sent!
But my function is not returning either the response or error.

• I also tried the rest API, but there is another error similar to this one -> #37

const msg = { firstName: values.firstName, email: values.email, message: values.text, subject: values.subject, };

export const SendEmail = (msg) => {
    emailjs
      .send(
        process.env.REACT_APP_SERVICE_ID,
        process.env.REACT_APP_TEMPLATE_ID,
        msg,
        process.env.REACT_APP_PUBLIC_KEY
      )
      .then(
        (response) => {
          console.log(response);
          return response;
        },
        (error) => {
          console.log(error);
          return error;
        }
      );
};

there is a bug when its comes to send public_key with data, its send user_id

Is it possible to iterate over objects, for example i have this kind of data

{
   "product":{
      "orderHistory":[
         {
            "date":"2/1/2018",
            "item":"shoes"
         },
         {
            "date":"1/4/2017",
            "item":"hat"
         }
      ]
   }
}

How do i write the tags on the email template to pick the individual orderHistory of each product?

I would like to do dynamic destination email on this field by depend on template parameter

Is it possible?

Hello,

I use the sdk for my react app.
I install your package but now i can't run my app, I always got an error from your package :

./node_modules/emailjs-com/es/methods/sendForm/sendForm.js 14:18
Module parse failed: Unexpected token (14:18)
File was processed with these loaders:

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | }
  |
  if (currentForm?.nodeName !== 'FORM') {
  | throw 'The 3rd parameter is expected to be the HTML form element or the style selector of form';
  | }

For information I use react 17.0.2 and typescript 4.2.4.

Any Idea how to fix that ?

Thank you.

Hi, I saw the file attachment on emailjs docs but this is the native form.

I can't seem to find a way send uploaded file through ajax or emailjs.send()?

Actually when I try to use an input radio, the value is only on or nothing.
I need to get the value of my input, it is possible ?

Used with angular:

<label class="order__form__label">Budget</label>
    <div class="order__form__input" *ngFor="let level of budgetLevels">
      <input type="radio" [id]="level.key" name="budget" [value]="level.label" formControlName="budget">
      <label class="order__form__input__radio-label" [for]="level.key">{{ level.label }}</label>
    </div>

budgetLevels = [
    { key: 'level1', label: 'less than 1000€' },
    { key: 'level2', label: '1000€ - 5000€' },
    { key: 'level3', label: '5000€ and more' }
  ];

Hello, I got problem when I send file and text from VueJS project

const templateParams = {
    name: 'James',
    notes: 'Check this out!',
    my_file: this.myfile
};

emailjs.send('<YOUR SERVICE ID>','<YOUR TEMPLATE ID>', templateParams, '<YOUR USER ID>')
	.then((response) => {
	   console.log('SUCCESS!', response.status, response.text);
	}, (err) => {
	   console.log('FAILED...', err);
	});

I used this code to send form data including file and text data, but I cannot receive file and text both.
How can I resolve this issue?

Hope to get help from you
Thank you

I am setting the up the emailjs service, with gmail as the service in an angular application.
As per the documentation below is the code to work:

var templateParams = {
    name: 'James',
    notes: 'Check this out!'
};

emailjs.send('<YOUR_SERVICE_ID>','<YOUR_TEMPLATE_ID>', templateParams)
	.then(function(response) {
	   console.log('SUCCESS!', response.status, response.text);
	}, function(err) {
	   console.log('FAILED...', err);
	});

But it should be

var templateParams = {
    name: 'James',
    notes: 'Check this out!'
};

emailjs.init('<YOUR_PUBLIC_KEY>');
That is available on https://dashboard.emailjs.com/admin/account

emailjs.send('<YOUR_SERVICE_ID>','<YOUR_TEMPLATE_ID>', templateParams)
	.then(function(response) {
	   console.log('SUCCESS!', response.status, response.text);
	}, function(err) {
	   console.log('FAILED...', err);
	});

I am trying to send an email from node js app

  const templateParams = {
    reply_to: user.email,
    to_name: user.nickname,
    confirmationCode: hash,
  };
  
  const response: EmailJSResponseStatus = await emailjs.send(
    environment.email_service_id,
    environment.email_request_confirmation_code_template_id,
    templateParams,
    environment.email_service_user_id,
  )

but getting "XMLHttpRequest is not defined"

While building my react app that time I'm getting

Failed to minify the code from this file.
./node_modules/@emailjs/browser/es/utils/validateParams.js:1:7

I'm struggling to find the solution for 3 days. Please help me.

I want use emailjs with nodejs script for some cron job to send notification, and got this error:

API calls are disabled for non-browser applications

why the rest api has this limit? how can I solve this error? thanks.

here is the code:

axios
  .post('https://api.emailjs.com/api/v1.0/email/send', {
    service_id: '<ID>',
    template_id: '<ID>',
    user_id: '<ID>',
    template_params: {
      message: 'Hello!'
    }
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((e: Error) => {
    console.error(e);
  });

I have got a simple function to send an email but emailjs is throwing error

Code I have:
import emailjs, { init } from 'emailjs-com'; init(process.env.EMAILJSUSERID) export const sendContactForm = async(req, res) => { const { userName, userEmail, messageContent } = req.body const emailTemplateParams = { user_name: userName, user_email: userEmail, message: messageContent, contact_number: "123" } try { const response = await emailjs.send("contact_form_service","contact_form", emailTemplateParams) res.send('success') } catch (error) { res.send(error) } }

Error received is
ReferenceError: XMLHttpRequest is not defined
at {{path to my app}}\node_modules\emailjs-com\cjs\api\sendPost.js:8:21

import { init } from './methods/init/init';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:355:18)
at wrapSafe (node:internal/modules/cjs/loader:1039:15)
at Module._compile (node:internal/modules/cjs/loader:1073:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)

The above error has been popping up ever since I've added the emailjs-com package to the project for a contact form.

• The framework used: Next.js
• The package manager used: yarn(initially), tried npm as well.
• Tried adding "type": "module" in the package.json file as well.
• Tried reinstalling the package multiple time as well.

The only scenario that it works right: When the app is up and running without the emailjs-com package and then when the package is installed while the localhost is running, but, this error pops up as soon as the page is refreshed.

Hello, I was browsing through the EmailJS docs when I was using it for my Next app and saw that we could add a React/TypeScript example.
This is mostly similar to the contactUs.js example but would be a convenient shortcut for TypeScript users where there needs to be type specifications and null safety.

import React, {useRef} from 'react';
import emailjs from '@emailjs/browser';

export default function ContactUs() {
    const form = useRef<HTMLFormElement>(null);

    const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        const currentForm = form.current;
        if (currentForm == null) return;

        emailjs.sendForm(
            'YOUR_SERVICE_ID',
            'YOUR_TEMPLATE_ID',
            currentForm,
            'YOUR_PUBLIC_KEY'
        )
            .then((result) => {
                console.log(result.text);
            }, (error) => {
                console.log(error.text);
            });
    };

    return (
        <form ref={form} onSubmit={sendEmail}>
            <label>Name</label>
            <input type="text" name="user_name"/>
            <label>Email</label>
            <input type="email" name="user_email"/>
            <label>Message</label>
            <textarea name="message"/>
            <input type="submit" value="Send"/>
        </form>
    );
};

The object I am passing contains a array. How can I use the values to prettify the markup?

Example object:

{
  "name":"78",
  "answers": [
    "empty",
    "answer 2",
    "answer 3",
    "answer 4"
  ]
}

I tried

{{#answers}}

<p>{{@index}}: {{this}}</p>

{{/answers}}
```
And this way I<p></p> is outputted four times without the value