Injecting environment variables into webpack configuration

Question

Injecting environment variables into webpack configuration

My goal is to set a BACKEND environment variable in order for our VueJS project to communicate with the API hosted there, but I keep receiving an error message saying Unexpected token :.

Here is the current code snippet from our config/dev.env.js, and I'm currently stuck at this point

module.exports = {
  NODE_ENV: '"development"',
  HOST: process.env.BACKEND,
  NAME: '"Jaguar Dashboard"'
}

All I want is for the process.env.BACKEND to be assigned a value like 'http://example.com' so that our VueJS project can function properly. How can I resolve this issue?

UPDATE

I was able to make it work by modifying the code as follows:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  HOST: 'http://example-0e1b-4a12-91ef-b853a47bab34.node.dockerapp.io:8000',
  NAME: 'Jaguar Dashboard'
})

When attempting JSON.stringify(process.env), an error(Unexpected identifier) occurs in this line:

[...]

When using '"'+process.env.BACKEND+'"', the same error(Unexpected identifier) arises in this line:

[...]

However, when I simply define a string as mentioned above, the code executes without any issues as shown below:

[...]

SCREENSHOTS OF THE CODES:

config/dev.env.js https://i.stack.imgur.com/LoyQq.png

build/webpack.base.conf.js https://i.stack.imgur.com/PAF4n.png

build/webpack.dev.conf.js https://i.stack.imgur.com/t8RDF.png

P.S.

The errors mentioned above occur during the execution of npm run dev in our VueJS project

javascript webpack vue.js

Answer 1

Answer №1

In reference to your most recent revision: you're attempting to retrieve process.env without specifying an ENV variable name (such as .BACKEND). Could this be a simple typo or the root cause of the problem at hand? : ) It should actually work like this:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            BACKEND: JSON.stringify(process.env.BACKEND),

Update:

The solution came when realizing that a variable value was missing double quotes:

NAME: 'Our site'

// ought to be corrected as:
NAME: '"Our site"'

Answer 2

In reference to your most recent revision: you're attempting to retrieve process.env without specifying an ENV variable name (such as .BACKEND). Could this be a simple typo or the root cause of the problem at hand? : ) It should actually work like this:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            BACKEND: JSON.stringify(process.env.BACKEND),

Update:

The solution came when realizing that a variable value was missing double quotes:

NAME: 'Our site'

// ought to be corrected as:
NAME: '"Our site"'

Answer 3

Answer №2

One might observe that the strings are enveloped in an extra set of quotes. This precaution ensures that strings do not get interpreted as variables.

Referencing the DefinePlugin documentation

It's important to note that due to direct text replacement by the plugin, the value provided must contain actual quotes within the string itself. This is commonly achieved by using alternate quotes like '"production"', or through JSON.stringify('production').

You could utilize

HOST: '"'+process.env.BACKEND+'"'

or

HOST: JSON.stringify(process.env.BACKEND)

(which is easier to read)

Answer 4

One might observe that the strings are enveloped in an extra set of quotes. This precaution ensures that strings do not get interpreted as variables.

Referencing the DefinePlugin documentation

It's important to note that due to direct text replacement by the plugin, the value provided must contain actual quotes within the string itself. This is commonly achieved by using alternate quotes like '"production"', or through JSON.stringify('production').

You could utilize

HOST: '"'+process.env.BACKEND+'"'

or

HOST: JSON.stringify(process.env.BACKEND)

(which is easier to read)

Injecting environment variables into webpack configuration

Answer №1

Answer №2

Similar questions

a function that repeats every single second

Enhance your React project by incorporating Material-UI card media elements with the ability to add

What is the method for retrieving data from the root component within a child template in VueJs?

Issue encountered when attempting to install React modules

applying v-bind directive when the variable is null

Displaying both items upon clicking

Utilize Vuex to close a Vuetify dialog box seamlessly

Can anyone provide guidance on creating a Jest test for an authenticated Express endpoint?

Customizing the renderInput of the Material UI DatePicker

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Unspecified data response error in Angular JS

Iterating through elements within a Div will retrieve the initial element exclusively

Is it possible to utilize both the /app and /pages folders in my Next 13 application?

Determining the file path in HTML5

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

Best practices for managing login authentication using MongoDB in a RESTful API

Setting the default selection in AngularJS based on the URL entered

JavaScript allows users to create a single string by merging multiple strings positioned at various points

Exploring the power of promise chaining within AWS Lambda