CODEWITHSUNDEEP
javascriptvue.jswebpackdotenv
Carlos Salazar
Carlos Salazar

Reputation: 1908

Dotenv not getting value as 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

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?

Upvotes: 2

Views: 5305

Answers (4)

Aracy
Aracy

Reputation: 154

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 ;)

Upvotes: 2

dugong
dugong

Reputation: 4461

I 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 || {})),
  ]
]

Upvotes: 3

osmarpetry
osmarpetry

Reputation: 73

Install this package as a development dependency (https://www.npmjs.com/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.com/package/dotenv-webpack

Upvotes: 1

Alexandros Panagiotakis
Alexandros Panagiotakis

Reputation: 928

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)

Upvotes: 2

Related Questions