Error encountered in Vue: Unexpected token (x:y) when utilizing webpack-dev-server with a process.env variable

While constructing a Vue (2.7.14) component with webpack-dev-server, I encountered a need to make a URL dynamic in my Vue CLI 2 code using a process.env variable. In order to achieve this, I made a modification to the line of code in MyComponent.vue:

      const uploadUrl = `http://localhost:3000/api/mycall`;

and transformed it into this:

      const uploadUrl = `${process.env.VUE_APP_APIURL}/api/mycall`;

(Side Note: Initially, I faced an issue where webpack was not updating. Since the process.env variable value was the same as the one used in the hard-coded version, I mistakenly believed it was functioning properly until much later. It was only upon closer inspection that I noticed the actual text change - specifically ${process.env.VUE_APP_APIURL} - in the browser code. After investigating further, I realized that webpack-dev-server was concealing the build problem by removing the error from the screen. Upon discovering that webpack was not updating, I checked my terminal and found a 'DONE Compiled successfully' message displaying. Possibly related to this. Argh!)

Subsequent to implementing the aforementioned change, I began to encounter webpack compilation errors such as these:

15% building modules 49/58 modules 9 active .../src/components/MyComponent.vue
SyntaxError: Unexpected token (1:5)
    at Parser.pp$4.raise (/Users/darrin/src/applet/node_modules/acorn-dynamic-import/node_modules/acorn/dist/acorn.js:2488:13)
    at Parser.pp.unexpected (/Users/darrin/src/applet/node_modules/acorn-dynamic-import/node_modules/acorn/dist/acorn.js:623:8)
    at Parser.pp.expect (/Users/darrin/src/applet/node_modules/acorn-dynamic-import/node_modules/acorn/dist/acorn.js:617:26)
    at Parser.pp$3.parseParenAndDistinguishExpression (/Users/darrin/src/applet/node_modules/acorn-dynamic-import/node_modules/acorn/dist/acorn.js:2043:38)
    at Parser.pp$3.parseExprAtom (/Users/darrin/src/applet/node_modules/acorn-dynamic-import/node_modules/acorn/dist/acorn.js:1978:41)

Below is the configuration for dev.env.js where the variable value is defined:

'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'
})
javascriptvue.jswebpackvuejs2

Answer №1

After some investigation, it became apparent that the issue stemmed from my omission of inner quotes in the variable values. Upon revisiting the example and consulting documentation, I discovered that variables must be enclosed in both single and double quotes, such as '"foo"', not just 'foo'... and the solution is quite straightforward:

'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 those who may be struggling to spot the distinction (as I did initially) - the crucial change involves transforming this line:

  VUE_APP_APIURL: 'http://localhost:3001'

Into this revised version (which mandates the presence of double quotes within single quotes):

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

Hopefully, this explanation proves beneficial to someone. If you've stumbled upon this and find yourself feeling frustrated, annoyed, or embarrassed, rest assured that you're not alone - both myself and this individual have faced similar frustrations. It can be quite exasperating.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending Twilio SMS Data from Node to React can be achieved by passing the post data

Currently utilizing Twilio for receiving SMS messages on my server, I am seeking a way to display the returned data in React. As Twilio sends data only server-side via a POST request when a text is sent from my phone, how can I access this POST data in m ...

javascriptnode.jsreactjsexpresstwilio

What steps can be taken to add a radio button group to a form in order to choose between the smoking and non-smoking sections of a restaurant?

I'm trying to replicate the functionality of radio buttons within a bootstrap form-group, where a line in a form contains multiple buttons ("btn btn-success" for example) that can be selected, but only one at a time. I am aiming for an output like thi ...

javascripthtmlcssbootstrap-4bootstrap-modal

I'm noticing that my CSS is behaving differently than expected. Despite setting position: absolute, the output is displaying as inline-block instead of block. Why is this happening

div { width:200px; height:200px; position: absolute; } .first-container { background-color: #9AD0EC; } .second-container { background-color: red; left: 200px; } .third-container { background-color: blue; left:400px; } Despite setting th ...

javascripthtmlcssweb

What is the proper way to utilize the value of a Node.js promise in a different function?

In my Node.js application, I have two functions defined. The first function is structured like this: function checkAdd ( address /* : string | void */ ) /* :Promise<Object[]> */ { var convertToLowerCase = address.toLowerCase() return Promi ...

javascriptnode.js

TinyMCE's Textarea is blank and not displaying any content

I can't seem to figure out where I went wrong with using TinyMCE. I downloaded it from and chose version 4.0.3. After downloading, I ended up with a folder called tinymce_4.0.3 which contained subfolders like tinymce_4.0.3\tinymce\js\t ...

javascripthtmltinymce

Unlocking the potential of NextAuth.js by enhancing the user session with additional database information on authentication

Currently, I am in the process of creating a straightforward credentials sign flow using next-auth ^4.24.5 with a nextjs 14 app. Within my user model, there is a boolean property named 'isAdmin' that I wish to make accessible in my session using ...

javascripttypescriptmongodbnext.jsnext-auth

Updating the state across various components proves to be a challenge when relying on both the context API and higher order components

I have been working on updating the application state using the context API instead of using Redux, as I do not require all of its features and want to avoid prop drilling. With TypeScript, I created a global context and a higher-order component (HOC) wrap ...

javascriptreactjstypescript

Tips for resolving NPM high severity vulnerabilities related to pollution issues

Every time I attempt to install npm packages, I encounter the same error message indicating "3 high severity vulnerabilities." When I execute the command npm audit fix, I consistently receive this: https://i.stack.imgur.com/3oJIB.png I have attempted to ...

javascriptnode.jsnpmlodashnpm-update

There is no matching overload for this call in React Native

I am working on organizing the styles for elements in order to enhance readability. Here is the code I have written: let styles={ search:{ container:{ position:"absolute", top:0, }, } } After defining the s ...

javascripttypescriptreact-native

Steps to send an object array using a promise

I've put in a lot of effort but haven't found a solution that works well for me. I attempted using promise.all and setting the array globally, but it didn't work out. My goal is to search through three MongoDB collections, match the finds, ...

javascriptnode.jsexpresspromise

Is there a way to showcase individual components on a single surface one at a time?

Let me try to explain my issue as clearly as possible! I am currently working on a website using React and Material-UI. On one of my pages, I have a Paper component where I want to display different components that I have created, but only one at a time. ...

javascriptreactjsmaterial-ui

Determine the dropdown list value by analyzing the final two variables in a textfield

In my textfield, car registration numbers are meant to be entered. These registrations are based on years in the format GT 74454 12, with the last two digits "12" representing the year 2012. I am looking for a script that can automatically detect the last ...

javascriptjqueryhtml

WebSocket connection established on port 8888, while the web server is running on port 80 - incompatible to merge the two services

Here is some node.js server-side code that involves watching a file and sending modifications to the browser: var app = require('http').createServer(handler) , io = require('socket.io').listen(app) , fs = require('fs') a ...

javascriptjquerynode.jswebsocketport

The Vue and Typescript webpage is not appearing in the GAS sidemenu template

I am tasked with developing an application for Google Sides using Vue + Typescript to enhance its functionality with an extra menu feature. You can find a sample without Typescript here. The result is visible in this screenshot: https://gyazo.com/ed417ddd1 ...

typescriptvue.jsgoogle-apps-scriptwebpackgoogle-slides

A guide to showcasing items based on their categories using React.js

After successfully displaying Categories from a port (http://localhost:5000), accessing my MongoDB database, I encountered an issue when attempting to display the products for each category separately. Despite trying the same method as before, I keep rec ...

javascriptreactjsreact-router

What is the best way to have various texts display after a certain number of clicks?

I am looking for a way to display different text based on the number of clicks within a certain class. For example, if the user clicks twice, the text displayed should be "You clicked two times", and this pattern continues until the fifth click, after whic ...

javascriptjqueryclick

Struggling to make the controller karma test pass

I am currently working on developing a "To Do list" using angular js. My goal is to allow users to click on a checkbox to mark tasks as completed after they have been finished. While the functionality works fine in the index.html file, I am struggling to p ...

javascriptarraysangularjskarma-runner

Assigning automatic roles based on the Discord.js v12 presence status of users

When someone is playing, I want to add a role using the presenceUpdate event However, every time I attempt this in discord.js v12, I encounter the following error: TypeError: Cannot read property 'activities' of undefined What mistake am I maki ...

javascriptnode.jsdiscorddiscord.js

Utilize a unique mesh instead of a generated one within three.js

Recently, I stumbled upon the fascinating world of three.js and I must say, it's quite amazing. After downloading some examples, I delved into exploring them. As someone who is new to coding in JavaScript, I find myself in need of assistance with mod ...

javascriptthree.jsmesh

Adding a variable to the .append function in HTML code

I am currently working on a way to include the current date and time when a user comments on a post in my forum. While I have successfully managed to upload the text inputted by the user into the comment section, I am now looking to also dynamically insert ...

javascriptjqueryhtml