[Functions] how do you inline the environments variables with esbuild?

Hi there, I almost spend a day to find the inline env solution for functions write in typescript and build with esbuild.

currently, the function runtime could only work with defined envs on netlify UI. But that could not support multiple environment, such as production and staging.

netlify-plugin-inline-functions-env is quite popular to inline the envs, but it could not work with .ts files with esbuild.

Could you let me know your solutions ? :wink:

Hi @zoeying,

Have you checked this part (it’s linked to a part in the docs):

1 Like

I’m in the same situation as the user above, i’m trying to use netlify-plugin-inline-functions-env with a function using typescript and esbuild, and the plugin doesn’t find any functions available.
I’ve looked trough the source code and i think the main problem is that the “utils.functions.listAll()” returns something like this:

  {
    srcFile: '/Users/alex/projects/project/src/test-function.ts',
    name: 'test-function',
    mainFile: 'test-function.ts',
    runtime: 'js',
    extension: '.ts'
  },

It seems like it returns the list of typescript files of the functions, and not the compiled js ones in the output directory.

I’ve tried onPreBuild, onBuild and onPostBuild with the same result, i’ve also tried to edit the plugins for a little test, hard coding my compiled function paths, and it seem to work fine.

I can make a pull request to the plugin, but i have some doubts on how i can get the functions list when using esbuild, i am not sure if the “utils.functions.listAll()” is intented to output the result above or if is broken, or if maybe there is another way to retrieve functions list.

Hi there, @alexpagnotta :wave:

Welcome to the Netlify Forums, and thanks for reaching out! My apologies for the slow response here. Are you still experiencing this issue? If you are, can you please send over:

  • your netlify site name / URL
  • your public repo
  • any additional debugging steps you have taken in the last seven days.

Thank you so much!

Hi,

Actually i have split my functions project in two “netlify sites” to avoid this problem (staging and production), so i don’t have a repo to share at the moment.
This works clearly, as i can now set different env variable in the UI for each site, but it’s just a workaround.

I’m not sure if i’m missing something, but i think netlify-plugin-inline-functions-env is the only way to have env variables in netlify functions at the moment, and since it doesn’t work with esbuild, we have to rely on having two separate sites or using netlify-lambda.

As i said i would love to make a pull request to the plugin, or even make a new one, but i cannot find a way to have a list of the built js files, as it seems that the “utils.functions.listAll()” does not work, and that js files are zipped when using EsBuild.

1 Like

Hey! I’m glad you’ve found a suitable workaround for now. In code, you may even be able to use a simple if statement to check for your build context:

const context = process.env.CONTEXT

  if (context === [...]

For reference, here’s one way using build plugins to contextualise environment variables (which discusses the above code extract in more detail too! Furthermore, here’s our general guide on using env vars correctly with a heap of suggestions in the comments.

1 Like

Uhm, are you sure that process.env.CONTEXT is available at function runtime? Because i was pretty sure that it’s undefined, this is the reason why i was using that plugin.

Hey @alexpagnotta – not forgotten, don’t worry!

Still keeping our ears to the ground for progress in this issue from our dev team which I think you’ll be interested in. If we get an update from the team, or other suggestions regarding your issue, we’ll be sure to share them here.

2 Likes

Hi @alexpagnotta,

Netlify can transpile TypeScript functions at build time. In other terms, you may keep the .ts file without transpiling it to a .js file. Would skipping the TypeScript transpiling step in your build help workaround your problem?

Consequently, our current logic assumes TypeScript functions only have a .ts file but not a sibling .js file, or the other way around. We just opened this issue to track this bug.

However, it seems to me the actual bug is a different one. The plugin seems not to handle TypeScript files properly. I have reported this bug to the community plugin author in this issue.

Thanks for reaching out!

cc @eduardoboucas

1 Like