Cannot read env file on Gatsby when using Docker
How is that possible? Why I can read all the env variables inside
gatsby-config.jsbut not in a component?
Because there are server-side environment variables and client-side environment variables. The first ones (server-side) are only available in the Node server (gatsby-config.js, gatsby-node.js, etc) while the seconds (client-side) only in the browser (the rest of the components, pages and templates).
To make an environment variable available to the browser, you need to prefix it with GATSBY_ prefix, as the docs points:
In addition to these Project Environment Variables defined in
.env.*files, you could also define OS Env Vars. OS Env Vars which areprefixed withGATSBY_will become available in browser JavaScript.