3

I am trying to display Gatsby env variables in md file. I checked online what was the best way to do it, and using JSX in a md file (with the help of mdx plugin) seems to be the best option. For example, I want to map an array, coming from the env variables, in order to display all values. However, it is impossible to get access to any variables.

ex (in my mdx file): <div>{process.env.MyVariable.map(el=>(<div>{el}</div>))}</div>

error: ReferenceError: process is not defined

I started to add Gatsby plugin env variables on this tutorial. I double checked how to do it with this sandbox. I can access to my variables inside my .js files, but not in my .mdx files.

What I am missing? Is it the best option to do it right?

Thanks for your help,

vldmrrdjcc
  • 2,082
  • 5
  • 22
  • 41
Fabien
  • 389
  • 2
  • 5
  • 15

2 Answers2

1

.env variables are strings so, you can't loop them and display what's inside each position like an array. You can set something like this in your .env.development:

MESSAGES="message1, messages2, messages"

However, this would be one single string. You'll need to split them into a 3 position array by let dotEnvArray = process.env.MESSAGES.split(',').

If you use try: MESSAGES=["message1", "messages2", "messages3"] it will be treated as MESSAGES= "['message1', 'message2', 'message3']".

What you are seeing here:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-env-variables`,
      options: {
        whitelist: ["MY_VAR", "MY_OTHER_VAR"]
      },
    },
  ],
}

Is an array of .env variables isolated. According to this plugin's documentation:

This will make MY_VAR & MY_OTHER_VAR available at runtime in your app by accessing process.env.MY_VAR or process.env.MY_OTHER_VAR.

However, those variables haven't any value defined, you will need to set them in your .env.development file anyway. This is because Gatsby by default only exposes all variables prefixed with GATSBY_. Take a look to Gatsby documentation about .env files for further information.

Answering another part of your question, once you've set (in your gatsby-config.js:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

By default, running gatsby develop Gatsby will take your .env.development variables and will expose them under process.env.VAR_NAME, always isolated and treated as a single string, just how your CodeSandbox shows.

To achieve what you want in your repository, just add your environment variables in your whitelist.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-env-variables`,
      options: {
        whitelist: ["ENDPOINTS"]
      },
    },
  ],
}
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • Thank for your answer, I got your point. However, as you can see on my [github repository](https://github.com/fabiendv/gatsbyBlog), variables are still not allowed in my mdx file... – Fabien Jun 16 '20 at 14:39
  • You need to name it `.env.development`. You can change the naming but by default, it concatenates `.env.ENV_NAME`. If you want to name it `.env.sample`, you will need to change the running script in `package.json`. Default environments are `.env.developemt` and `.env.production`. – Ferran Buireu Jun 16 '20 at 14:55
  • 1
    Of course. It is because .env* are in my .gitignore. So I called it .sample to push it. I will update it to prevent the confusion – Fabien Jun 16 '20 at 14:58
  • Does your `.env.development` a variable called `ENDPOINTS` inside? – Ferran Buireu Jun 16 '20 at 14:59
  • I forgot to rename it. But it doesnt change anything.. Variables are not readable from my example.mdx file – Fabien Jun 16 '20 at 15:04
  • What's the output from `process.env` and `process.env.NODE_ENV`? The first will show us if there are any environment variables there and the second will output the environment (to check if the file is correct). – Ferran Buireu Jun 16 '20 at 15:10
  • Empty (in blog-post.js at line 42) – Fabien Jun 16 '20 at 15:12
  • process.env.NODE_ENV equals to development – Fabien Jun 16 '20 at 15:13
  • Did you try removing the plugin `gatsby-plugin-env-variables`? – Ferran Buireu Jun 16 '20 at 15:16
  • No.. Why should I do that? – Fabien Jun 16 '20 at 15:17
  • Same issue when I remove the `gatsby-plugin-env-variables` – Fabien Jun 16 '20 at 15:20
  • That's it! Your variables will only be available if they are prefixed with `GATSBY_` (i.e: `GATSBY_ENDPOINTS`) if you don't want to do so, just use add it to your whitelist. I've updated my answer. – Ferran Buireu Jun 16 '20 at 15:21
  • Oh ok I understood. But I still cannot access to the variable in my example.mdx which I just pushed – Fabien Jun 16 '20 at 15:32
  • Even `process.env.GATSBY_API_URL`? – Ferran Buireu Jun 16 '20 at 15:35
  • Yes. Still `ReferenceError: process is not defined` – Fabien Jun 16 '20 at 15:36
  • https://stackoverflow.com/questions/53741674/cant-access-gatsby-environment-variables-on-the-client-side what about this? – Ferran Buireu Jun 16 '20 at 15:42
  • What if do you try to `console.log` outside a `return`? Try it where do you declare `const siteTitle = data.site.siteMetadata.title` – Ferran Buireu Jun 16 '20 at 15:43
  • I checked it out earlier and it is useless because my problem comes from my mdx file. In my blog-post.js, every variables are working.. But they are not available in my example.mdx where :> `process is undefined`. – Fabien Jun 16 '20 at 15:46
  • Then store them in a variable before and share that variable in your component. – Ferran Buireu Jun 16 '20 at 15:47
  • Thanks. Is this the right way to do it? Seems to me not optimized at all – Fabien Jun 17 '20 at 07:39
  • Of course, there's nothing wrong with creating a variable to store what's inside `process.env.NAME` and share it wherever you want, it's more readable indeed. – Ferran Buireu Jun 17 '20 at 07:54
  • 1
    Thank you for your help. For now, I let the question open to get other idea. – Fabien Jun 17 '20 at 08:03
1

For now I managed to achieve it only with intermediate JS config.

1. Create JS config wrapper:

// site-config.js

export const siteConfig = {
  siteUrl: process.env.GATSBY_SITE_URL,
  dashboardUrl: process.env.GATSBY_DASHBOARD_URL,
};

2. Use this middle config in MDX files

// pages/index.mdx
 
---
title: Getting started
description: How to get started?
---
import { Link } from 'gatsby';
import { siteConfig } from '../../../site-config';


This is our <a href={siteConfig.dashboardUrl}>proxyly.io Dashboard</a>.
Waldz
  • 104
  • 6