CODEWITHSUNDEEP
javascriptnode.jsvue.jsvuejs2webkit
Terje Nygård
Terje Nygård

Reputation: 1257

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

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 :

enter image description here

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)

Upvotes: 0

Views: 1176

Answers (1)

yuriy636
yuriy636

Reputation: 11661

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")
  }
})

Upvotes: 7

Related Questions