4

⚽️ Goal

Send email using emailjs in a NuxtJS application.

Problem

Initially, fs can't be located despite being installed.

This dependency was not found: fs in ./node_modules/emailjs/smtp/message.js

According to this similar question, the problem should be solved by adding target: 'node' to webpack.config.js. I've injected said configuration into nuxt.config.js as is the Nuxt.js way (I think), but that generates the following error:

WebpackOptionsValidationError: Invalid configuration object.
Webpack has been initialised using a configuration object that
does not match the API schema.
  - configuration.module.rules[10] has an unknown property 'target'.
    These properties are valid: object { enforce?, exclude?, include?,
    issuer?, loader?, loaders?, oneOf?, options?, parser?, query?,
    resource?, resourceQuery?, compiler?, rules?, test?, use? }

Does this mean that it's not currently possible?

⌨️ Code

nuxt.config.js

build: {
  /*
  ** Run ESLint on save
  */
  extend (config, { isDev, isClient }) {
    config.module.rules.push({target: 'node'}) // <-- Added this

    if (isDev && isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
    }
  }
}

investment.vue

export default {
  asyncData ( context ) {
    let email = require('../node_modules/emailjs/email');

    console.log('process.server', process.server); // Evalutes to true
  }
};

package.json

"dependencies": {
  "emailjs": "^2.2.0",
  "fs": "^0.0.1-security",
  "net": "^1.0.2",
  "nuxt": "^1.0.0",
  "tls": "^0.0.1"
},
Donnie
  • 6,229
  • 8
  • 35
  • 53
  • 1
    check [Github: emailjs](https://github.com/eleith/emailjs#emailjs-), it describes `send emails, html and attachments (files, streams and strings) from node.js to any smtp server`. but your environment (or target) will be **web** (Nuxt sends compiled html and js to the browser) instead of **node**. Even somehow webpack can build your project, but the browser will not be able to send out the email because the browser doesn't support the APIs which emailjs uses. – Sphinx Aug 14 '18 at 20:39
  • I suppose I'm mistaken, but I thought Nuxt's SSR might allow nodejs code to be executed on the server. – Donnie Aug 14 '18 at 21:08

1 Answers1

2

Nuxt code is divided into client and server part. You tried to use the library emailjs within a component and this is a client part. It cannot access the fs library (in web). You need to write it on the server part (eg. in express server that serves your pages.

Jakub Saleniuk
  • 405
  • 5
  • 15
  • 1
    You are right. I moved that logic inside `asyncData ()` and `process.server` confirms that it is running server side. However, the original problem remains in that it cannot find `fs`. Evidently, the `fs` package has been discontinued in favor of [`fs-extra`](https://www.npmjs.com/package/fs-extra). Not sure how to handle that. – Donnie Aug 15 '18 at 20:53