1

I am trying to use emailjs in my NextJS application to which you can find the repo here. When I deploy the application to Vercel, it throws an error saying I cannot use an import statement outside a module and seems to point to the emailjs import as the source of the error.

enter image description here

I went ahead and did a dynamic import of emailjs like this:

import dynamic from "next/dynamic";

const emailjs = dynamic(
  () => import("emailjs-com").then((component) => component.emailjs),
  { ssr: false }
);

With the dynamic import like this, I am able to deploy to Vercel w/o errors. However, my emailjs code does not work anymore and throws an error that says "emailjs.sendForm is not a function" when the relevant code gets executed. How can I use emailjs with NextJS properly?

5
  • 2
    This isn't related specifically to NextJs but to the nature of emailJs package which is presumably not an es6 module. You'll have to use require("emailjs") instead of import Commented Jun 23, 2021 at 22:05
  • I'm confused though because it was working just fine when I used import. The problem only surfaced when I try to deploy the app on Vercel. Why would I be able to use import in development and have to use require on prod? Commented Jun 23, 2021 at 22:12
  • That didn't work. I'm still getting the same error. Commented Jun 23, 2021 at 22:19
  • 1
    You could always transpile the package, if needed. next-transpile-packages on NPM Commented Jun 24, 2021 at 0:28
  • 2
    Does this answer your question? NextJS + react-hook-mousetrap : "Cannot use import statement outside a module" Commented Jun 25, 2021 at 18:51

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.