Nuxt.js: process.env.TOKEN is undefined

[JoseJuan81]

Versions

• nuxt:
• node:

Steps to reproduce

set process.env.TOKEN =$2yr$10$tN3JmuvXZKGwi0l38A.SxUVemGrFJiyLunyqkOqOTE7LHsrSwMEmEBi in .env file
console.log(process.env.TOKEN) in nuxt.config.js.

What is Expected?

$2yr$10$tN3JmuvXZKGwi0l38A.SxUVemGrFJiyLunyqkOqOTE7LHsrSwMEmEBi

What is actually happening?

undefinedundefinedundefinedt.SxUVemGrFJiyLunyqkOqOTE7LHsrSwMEmEBi

There was no error in nuxt 2.12.2 just when I update to 2.14.3.

[f3ltron]

Hello @JoseJuan81. Show us your nuxt.config.js but i think it's because you don't put it on env config in nuxt

https://fr.nuxtjs.org/api/configuration-env/

[danielroe]

Looks like this might be an issue with the new runtimeConfig interpreting the $2yr etc. as variables to be interpolated.

[pi0]

Indeed it seems a bug in forked version of dotenv-expand.

[JoseJuan81]

[JoseJuan81]

require('dotenv').config();

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    htmlAttrs: {
      lang: 'es',
    },
    title: '¡ Tu tienda virtual !',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  generate: {
    fallback: true,
    routes: [],
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~/plugins/vue-carousel', ssr: false },
    { src: '~/plugins/vue-backtotop', ssr: false },
    { src: '~/plugins/vue-toastification', ssr: false },
    { src: '~/plugins/vueperslides', ssr: false },
    { src: '~/plugins/tree-nodes-dl.js', ssr: false },
    { src: '~/plugins/vuelidate.js', ssr: false },
    '~/plugins/apollo.js',
    '~/plugins/axios.js',
    '~/plugins/colors.js',
    '~/plugins/categories.js',
    '~/plugins/vue-filter.js',
    // { src: '~/plugins/firebase' },
  ],

  /**
   * Opciones del módulo de autorización y autenticación
   */
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: `${process.env.SALES_URL}/signin/auth`,
            methods: 'post',
            headers: {
              Authorization: `Bearer ${process.env.TOKEN}`
            },
            propertyName: 'data.token',
          },
          logout: false,
          user: {
            url: `${process.env.SALES_URL}/customers/current`,
            methods: 'get',
            propertyName: false,
          },
        },
        redirect: {
          callback: '/',
          login: '/inicio-sesion',
          logout: '/',
          home: '/'
        },
        tokenType: 'Bearer'
      },
      facebook: {
        client_id: process.env.CLIENT_ID,
        redirect_uri: process.env.REDIRECT_URI,
        scope: ['public_profile', 'email'],
        userinfo_endpoint: 'https://graph.facebook.com/v7.0/me?fields=id,name,last_name,picture{url},email',
      }
    }
  },
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    '@nuxtjs/auth',
    '@nuxtjs/eslint-module',
    '@nuxtjs/dotenv',
    '@nuxtjs/tailwindcss',
    '~/modules/commerceData.js',
    '~/modules/generateCategoriesPages.js',
    '~/modules/generateProductsDetailsPages.js'
  ],
  /*
  /*
  ** Global CSS
  */
  css: [
    './assets/scss/styles/animate.min.css',
    './assets/scss/styles/fontawesome.min.css',
    './assets/scss/styles/style.scss',
    './assets/scss/styles/admin.scss',
    './assets/scss/styles/responsive.scss',
    './assets/css/dl-multiselect.scss',
    './assets/css/dl-user-profile-layout.scss'
  ],
  /** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
    proxy: true
  },
  /*
  ** Globally configure <nuxt-link> default active class.
  */
  router: {
    linkActiveClass: 'active',
    // middleware: [
    //   'templateVersion'
    // ],
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, { isDev, isClient }) {
    }
  },
  /**
   * Opciones globales de vue
   */
  vue: {
    config: {
      devtools: true,
    },
  },
  /**
   * Variables de entorno para la app
   */
  env: {
    ACL_COMPANY_CODE: process.env.ACL_COMPANY_CODE,
    ACL_URL: process.env.ACL_URL,
    APP_CODE: process.env.APP_CODE,
    CLIENT_ID: process.env.CLIENT_ID,
    CODE_PROJECT: process.env.CODE_PROJECT,
    COMMERCE_CODE: process.env.COMMERCE_CODE,
    DEFAULT_AVATAR: process.env.DEFAULT_AVATAR,
    PRODUCTS_URL: process.env.PRODUCTS_URL,
    ROLE_CODE: process.env.ROLE_CODE,
    SALES_URL: process.env.SALES_URL,
    TOKEN: process.env.TOKEN,
    UPLOAD_URL: process.env.UPLOAD_URL,
    WAYS_DELIVERIES: process.env.WAYS_DELIVERIES,
    SITE_NAME: process.env.SITE_NAME,
    SITE_URL: process.env.SITE_URL
  },
  server: {
    port: 3002
  }
}

[JoseJuan81]

@danielroe I think you are right because the problem is about $ character

[JoseJuan81]

@pi0 when I make console.log of require('dotenv').config() in my nuxt.config.js I can see the TOKEN value right but, if I make console.log(process.env.TOKEN) the value is undefined...
I think the problem is about special characters when nuxt read it from .env

[pi0]

Hi @JoseJuan81. Issue should be resolved with v2.14.5. Still escaping with \\ is recommended. (more context: #8013)