Vue.js : “Invalid or unexpected token” when using webpack.DefinePlugin()

Question

Honestly.. i'm a bit new to node and process.env stuff.. There is probably a perfectly good explanation somewhere to what i'm asking but i haven't found it yet..

The Task :

Storing username and password in a env.js file so i can check against those in my store.js file...

Current approach :

webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
var webpack = require('webpack');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        loginEmail: "xxxxx",
        loginPw: "xxxxxx"
      }
    })
  ],
.... rest is default/unchanged

Error :

I haven't gotten to the part where i actually access the process.env.loginEmail yet, but i assume it's like this (either in component or store.js) :

console.log("Process listings ==>")
console.log("loginEmail : " + process.env.loginEmail)

Answer 1

From DefinePlugin docs :

Note that because the plugin does a direct text replacement, the value given to it must include actual quotes inside of the string itself. Typically, this is done either with either alternate quotes, such as '"production"' , or by using JSON.stringify('production') .

So, change your code to:

new webpack.DefinePlugin({
  'process.env': {
    loginEmail: "'xxxxx'",
    loginPw: "'xxxxxx'"
  }
})

or

new webpack.DefinePlugin({
  'process.env': {
    loginEmail: JSON.stringify("xxxxx"),
    loginPw: JSON.stringify("xxxxxx")
  }
})