I have installed dotenv to set enviroment variables for development and production, one of those variable is the ROOT_API, my env file look like this
NODE_ENV=dev
ROOT_API=http://localhost/project/public/
PORT=8000
I set my api request configuration in axios and followed the steps in the dotenv repo like this
require('dotenv').config({path: `${__dirname}/../.env`})
//I asume this is right as the value get returned
//but there does not say that i have to configure anything else
export const http = axios.create({
baseURL: process.env.ROOT_API + 'api/',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': tokenType + ' ' + token
}
})
I expect that process.env.ROOT_API return the value as a string but in the console i see the error Uncaught SyntaxError: Unexpected token : when i see where is the problem the values is shown as
var http = __WEBPACK_IMPORTED_MODULE_5_axios___default.a.create({
baseURL: http://localhost/project/public/ + 'api/',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': tokenType + ' ' + token
}
});
i have tried
- using different quotes in the
.envfile - convert the
process.env.ROOT_APIto string or logging the type of the value but get erroSyntaxError: missing ) after argument listas the value seems like plain text in js. - using template literals like this
${process.env.ROOT_API}; show inconsole > sources'' + http://localhost/project/public/;//i dont know how to show the ` quotes it display it like code sorry.
I do a console.log to see what process.env have in console and this is what it shows
...
PWD: 'C:/xampp/htdocs/project',
ROOT_API: 'http://localhost/erp-api/public/',
SESSIONNAME: 'Console',
...
how can i fix this? i do not understand why it not get the value as a string?
I have installed dotenv to set enviroment variables for development and production, one of those variable is the ROOT_API, my env file look like this
NODE_ENV=dev
ROOT_API=http://localhost/project/public/
PORT=8000
I set my api request configuration in axios and followed the steps in the dotenv repo like this
require('dotenv').config({path: `${__dirname}/../.env`})
//I asume this is right as the value get returned
//but there does not say that i have to configure anything else
export const http = axios.create({
baseURL: process.env.ROOT_API + 'api/',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': tokenType + ' ' + token
}
})
I expect that process.env.ROOT_API return the value as a string but in the console i see the error Uncaught SyntaxError: Unexpected token : when i see where is the problem the values is shown as
var http = __WEBPACK_IMPORTED_MODULE_5_axios___default.a.create({
baseURL: http://localhost/project/public/ + 'api/',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': tokenType + ' ' + token
}
});
i have tried
- using different quotes in the
.envfile - convert the
process.env.ROOT_APIto string or logging the type of the value but get erroSyntaxError: missing ) after argument listas the value seems like plain text in js. - using template literals like this
${process.env.ROOT_API}; show inconsole > sources'' + http://localhost/project/public/;//i dont know how to show the ` quotes it display it like code sorry.
I do a console.log to see what process.env have in console and this is what it shows
...
PWD: 'C:/xampp/htdocs/project',
ROOT_API: 'http://localhost/erp-api/public/',
SESSIONNAME: 'Console',
...
how can i fix this? i do not understand why it not get the value as a string?
Share Improve this question edited Jan 26, 2019 at 21:13 Carlos Salazar asked Jan 26, 2019 at 20:08 Carlos SalazarCarlos Salazar 1,9086 gold badges28 silver badges48 bronze badges 4- How are you loading dotEnv config in the code? – Supermacy Commented Jan 26, 2019 at 20:17
- Edited, i just followed the repo steps. – Carlos Salazar Commented Jan 26, 2019 at 20:20
-
have you tried template literal including wrap quotes?
baseURL: `'${process.env.ROOT_API}api/'`– Gowri Commented Jan 26, 2019 at 20:31 - yes i have, same result – Carlos Salazar Commented Jan 26, 2019 at 20:44
4 Answers
Reset to default 3I had the same issue and this is what I have done:
If you are using webpack.DefinePlugin() use webpack.EnvironmentPlugin() instead, and get the dotenv.parsed keys in there with Object.keys() like this:
// webpack.config.js
const webpack = require('webpack')
const dotenv = require('dotenv').config()
module.exports = {
//...other configs
plugins: [
new webpack.EnvironmentPlugin(Object.keys(dotenv.parsed || {})),
]
]
Your code should run fine. I see no issue with it and I just validated it without webpack.
If
baseURL: process.env.ROOT_API + 'api/'
gets translated like:
baseURL: http://localhost/project/public/ + 'api/', it means that there is an issue with your transpilation. You should check for the issue there (or update the question with more info about your webpack config and usage)
A bit late... but follows my solution.
...
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed)
})
Converts everything to string no more random errors ;)
Install this package as a development dependency (https://www.npmjs./package/dotenv-webpack):
npm install --dev dotenv-webpack
or
yarn add -D dotenv-webpack
After it, just add this code to your webpack file:
const Dotenv = require('dotenv-webpack');
module.exports = {
...
plugins: [
new Dotenv()
]
...
};
Reference Link: https://www.npmjs./package/dotenv-webpack