NuxtJS: EmailJS Can't Find Dependency 'fs'

Question

⚽️ 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"
},

Answer 1

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.