Sendgrid-nodejs: Problems using sendgrid with Nuxt

[froquette]

After requiring sendgrid in a module I'm start having unresolved dependencies from the following modules: fs, net, tls. I'm now using the latest sendgrid-nodejs v6.0.0.
Since Nuxt is server side I'm assuming these modules are not supported by Nuxt. Any examples of using sendgrid with Nuxt?

[thinkingserious]

Hello @froquette,

Could you please provide the log files with the errors? Thanks!

With Best Regards,

Elmer

[froquette]

When having sendgrid declared: var helper = require('sendgrid').mail

[email protected] dev C:\nodejs\jpServer\jps01
nuxt

ERROR Failed to compile with 3 errors21:49:13

This dependency was not found:

• fs in ./node_modules/mime/mime.js, ./node_modules/sendgrid/lib/helpers/inbound/parse.js and 1 other

To install it, you can run: npm install --save fs

[thinkingserious]

Hi @froquette,

It looks like you don't have the latest package, can you please try this?

[froquette]

Hi Thomas,
Already tried with this (v6.0.0) and get unresolved dependencies fo: fs,
tls, net. I guess these modules are not supported in Nuxt.

On Tue, Aug 29, 2017 at 10:45 PM, Elmer Thomas [e-mail]
wrote:

Hi @froquette https://github.com/froquette,

It looks like you don't have the latest package, can you please try this
https://github.com/sendgrid/sendgrid-nodejs/tree/master/packages/mail#install-package
?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/sendgrid/sendgrid-nodejs/issues/432#issuecomment-325813542,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGHRvDF7oB8-4q33M90EeDRStG1uqUwPks5sdIZbgaJpZM4PGf2j
.

--
Cumprimentos,
Filipe Roquette

[thinkingserious]

Hi @froquette,

Could you please provide what errors (from your logs) that you get when you tried to install v6?

Did you try npm install --save fs?

[froquette]

Hi Thomas,
Thank you for your support!!

I've reverted back to the previous version since v6.0.0 shows unresolved
dependencies from fs, tls and net. If really needed I can re-install it and
send you the compilation logs showing these issues.

I tried to install "fs" but it creates other problems. Since Nuxt is SSR
(server side rendering) I guess client side modules like "fs" are not
supported.

On Tue, Aug 29, 2017 at 10:56 PM, Elmer Thomas [e-mail]
wrote:

Hi @froquette https://github.com/froquette,

Could you please provide what errors (from your logs) that you get when
you tried to install v6?

Did you try npm install --save fs?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/sendgrid/sendgrid-nodejs/issues/432#issuecomment-325816203,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGHRvNmrCg3uroNcipz4wH4UXevb7oYkks5sdIj7gaJpZM4PGf2j
.

--
Cumprimentos,
Filipe Roquette

[thinkingserious]

Hello @froquette,

Thanks for the update! The logs would help us figure out if there is a good workaround. If you have a moment, it would be great to see them.

With Best Regards,

Elmer

[froquette]

Here is the log with package.json dependencies: "@sendgrid/mail": "^6.1.1"

[email protected] dev C:\nodejs\jpServer\jps01
nuxt

ERROR Failed to compile with 6 errors17:57:10

These dependencies were not found:

• fs in ./node_modules/request/lib/har.js
• net in ./node_modules/forever-agent/index.js, ./node_modules/tough-cookie/lib/cookie.js and 1 other
• tls in ./node_modules/forever-agent/index.js, ./node_modules/tunnel-agent/index.js

To install them, you can run: npm install --save fs net tls

[thinkingserious]

Hi @froquette,

This seems related: https://github.com/request/request/issues/1529

[froquette]

Tried, but still having same issue.

On Thu, Aug 31, 2017 at 6:28 PM, Elmer Thomas [e-mail]
wrote:

Hi @froquette https://github.com/froquette,

This seems related: request/request#1529
https://github.com/request/request/issues/1529

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/sendgrid/sendgrid-nodejs/issues/432#issuecomment-326366422,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGHRvBltsGrWEt3JkddfT49NPyyrKkxWks5sdu07gaJpZM4PGf2j
.

--
Cumprimentos,
Filipe Roquette

[thinkingserious]

Hi @froquette,

Which solution(s) did you try and what was the error?

[froquette]

Finally managed to get it working. Not exactly sure what wasthe problem before. Anyway where is the extract of the "nuxt.config.js" that works,

  build: {
    extend (config) {
      config.node = {
        console: true,
        fs: 'empty',
        net:'empty',
        tls:'empty',
      }
    },
   ...

[thinkingserious]

Thanks for taking the time to share the solution! In gratitude, could you please fill out this form so that we may send you some swag?

[froquette]

Thank you for the supporting and pointing me the right direction.
Cheers, Filipe

Enviado do meu iPad

No dia 07/09/2017, às 17:17, Elmer Thomas [e-mail] escreveu:

Thanks for taking the time to share the solution! In gratitude, could you please fill out this form so that we may send you some swag?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[eljass]

@froquette
I try to achieve the same thing and your answer fixed my previous errors but somehow I'm not able to get yarn run build to execute. I get the following error:

ERROR in pages/contact.92ae317ce1e8cd6ecca8.js from UglifyJs Unexpected token: punc (,) [./node_modules/@sendgrid/helpers/index.js:12,18][pages/contact.92ae317ce1e8cd6ecca8.js:2002,25]

Did you have same error and if so how did you fix it?

[froquette]

I'm using npm (not yarn) and not having such error.

On Fri, Sep 8, 2017 at 11:54 AM, Eljas [e-mail] wrote:

@froquette https://github.com/froquette
I try to achieve the same thing and your answer fixed my previous errors
but somehow I'm not able to get yarn run build to execute. I get the
following error:

ERROR in pages/contact.92ae317ce1e8cd6ecca8.js from UglifyJs Unexpected
token: punc (,) [./node_modules/@sendgrid/helpers/index.js:12,18][pages/
contact.92ae317ce1e8cd6ecca8.js:2002,25]

Did you have same error and if so how did you fix it?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/sendgrid/sendgrid-nodejs/issues/432#issuecomment-328072989,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGHRvMomseMLkiwd0TDy9P_Y69zNuAWoks5sgRzrgaJpZM4PGf2j
.

--
Cumprimentos,
Filipe Roquette

[thinkingserious]

Hi @jloproductions,

Looks like you might be running into this issue. Could you please take a look and let us know? Thanks!

With Best Regards,

Elmer

[eljass]

Hey @thinkingserious
Can't get it working. Could you provide some examples?

@froquette
Do you use some Nuxt.js's starter template with your project?

[eljass]

I was finally able to run my build. I changed my UglifyJsPlugin to BabiliPlugin (yarn add babili-webpack-plugin).
Here is my nuxt.config.js:

const BabiliPlugin = require('babili-webpack-plugin')
module.exports = {
    ...
    build: {
        extend (config, ctx) {
          config.node = {
            console: true,
            fs: 'empty',
            net: 'empty',
            tls: 'empty'
          }
          if (ctx.dev && ctx.isClient) {
            config.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
             exclude: /(node_modules)/
            })
          }
          if(!ctx.dev) {
            config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'UglifyJsPlugin')
            config.plugins.push(new BabiliPlugin())
           }
        },
    },
    ...
}

But now I have some CORS error with the SendGrid API
Fetch API cannot load https://api.sendgrid.com/v3/mail/send. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://sendgrid.api-docs.io' that is not equal to the supplied origin. Origin 'https://my-url.com' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I'm using basic send mail example from https://github.com/sendgrid/sendgrid-nodejs/tree/master/packages/mail.

[froquette]

Hi @eljass,
I did found your issue with the UglifyJs as soon moved to production. For now I've just removed the UglifyJs plugin, but with some more time will try out your solution. Thank you!

Regarding the CORS issue. I'm also trying to remove this issue. Already tried to set headers in the send message to sendgrid but without success. Here the headers I've used,
headers: {
'Content-Type': 'application/json' ,
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
'Access-Control-Allow-Headers':'X-Requested-With'
}
--- NO SUCCESS YET !!!

[thinkingserious]

Hello @froquette @eljass,

Thank you for continuing to share your progress. With regards to CORS, please see this documentation.

With Best Regards,

Elmer

[eljass]

@thinkingserious
Didn't find anything new on that documentation. Couldn't get it working with sendgrid the basic nodejs example. Is there some additional steps other than setting environment variable for API key?

[froquette]

@thinkingserious ,
Didn't find much either in the documentation.
What I find weird is that having my sendgrid client code inside a store/action, should be only server side code using the sendgrid API and therefore cannot understand the CORS issue.
My app is hosted in Heroku and perhaps you know of some examples I could use to test in Heroku. It would definitely help since I'm stucked with this issue as well.
Cheers

[thinkingserious]

@eljass @froquette,

Thank you for the follow up!

In order to assist further I will need to learn more about your setup so that I can try to duplicate. Could you please walk me through how to duplicate your setup? A simple hello world would suffice.

My theory was that you were trying to utilize SendGrid via the frontend/client side vs. server side. In that case, the CORS issue is the culprit. I don't understand how the CORS issue would happen on the server side.

With Best Regards,

Elmer

[froquette]

@thinkingserious,
Thank you for the support!
I'm trying a new path to make sure there is strick separation from client and server code. Will report here as soon having results.
Best, Filipe

[ongerit]

@froquette Did you ever find a solution to this issue?

[froquette]

Yes. I'm now using Express and Nuxt. (see
https://github.com/nuxt-community/express-template)
My vue page calls a store action which uses a REST api to call the
server-side email function. Works fine.

On Wed, Nov 1, 2017 at 1:40 PM, Thomas Ongeri [e-mail]
wrote:

@froquette https://github.com/froquette Did you ever find a solution to
this issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/sendgrid/sendgrid-nodejs/issues/432#issuecomment-341108847,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGHRvPzJLZvaMZA8Q5HUBwjLVc9q73CRks5syHTbgaJpZM4PGf2j
.

--
Cumprimentos,
Filipe Roquette

[muhammedjenos]

@froquette Hi,
I just started building a nuxtjs app first time and hit the same road block. Could you provide a full working code sample how to get this up and running?

[chrisgereina]

@muhammedjenos it's not Sendgrid, but if you're doing JAMstack with Nuxt and just want to capture emails I'd recommend trying out Converkit -- they let you just embed a email capture form with HTML & JS no fuss

https://convertkit.com/features/forms

Also, I'm not affiliated with Convertkit it any way I was just weighing my options and ran into this thread