[Vuejs]-Vue SyntaxError: Unexpected token (x:y) when using webpack-dev-server when using process.env variable

by

0👍

It turned out that this was because I forgot the inner quotes in the variable values. Looking again more closely at the example and then finding some documentation that says that variables need to be wrapped into single and double quotes. e.g. ‘"foo"’, but never ‘foo’… the fix is simple:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  VUE_APP_APIURL: '"http://localhost:3001"'
})

For anyone reading this not able to see the difference (as was the case for my autocorrecting mind) – let me narrow this – we’re talking about going from this string:

  VUE_APP_APIURL: 'http://localhost:3001'

To this (the double quotes inside the single quotes are required) one:

  VUE_APP_APIURL: '"http://localhost:3001"'

Hopefully this helped someone. If you stumbled across this and are feeling frustrated, angry or ashamed, you’ve got company from me and this guy. Super frustrating.

Leave a comment