can't access property "VITE_APP_URL", (intermediate value).env is undefined

Hi,

Trying to concatenate an .env variable in a <script> in blade using Vite.

const response = await fetch(import.meta.env.VITE_APP_URL + 'auctions/jobs/create/job-credits/update', {

I've tried a number of things: https://laracasts.com/discuss/channels/vue/loading-env-variables-for-vue3-and-vitejs but cannot seem to get around this meta intermediate value error.

From what I see here, what I'm doing should work: https://vitejs.dev/guide/env-and-mode.html#env-files

Any ideas?

Have tried process.env.VITE_APP_URL but that is not accessing the variable either...

meduz

3 years ago

Level 5

Hi @trevorpan, Vite doesn’t process Blade files, so you have to resort to PHP to import an .env entry in an inline <script>. The way to do it is using the env() helper {{ env('your_env_key) }}. So for your example, it should look like this:

<script>
const response = await fetch('{{ env ('VITE_APP_URL') }}' + 'auctions/jobs/create/job-credits/update')
</script>

(Small note: it’s good practice to not directly use env() every where in your app, but to proxy it by config().)

trevorpan

3 years ago

Level 15

@meduz yea I was reading in the docs that env() should only be used in the config. So, that's why I hadn't done that yet.

Here it says we can use import.meta.env.VITE_KEY https://laravel.com/docs/10.x/vite#environment-variables

That's why I found this confusing, maybe I'm doing something else wrong?

What do you mean by proxy it with config()

Thank you ~

meduz

3 years ago

Best Answer

Level 5

@trevorpan Example of proxying:

Imagine this in the .env file:

SOMETHING_ENABLED=true

Then you have a config file (/config/something.php) using that value:

<?php

return [
  'enabled' => env('SOMETHING_ENABLED', false),
];

Then anywhere else in your app, instead of using env('SOMETHING_ENABLED) to get the value, you would use config('something.enabled'). The benefit for this is that the config file can be cached, and you limit the risk of exposing important .env values to other parts of the app.

Now back to Vite: import.meta.something is a standard JS feature, and you can only use it in a JavaScript file.

As Blade is PHP and outputs HTML, it has no idea that there is a value that exists behind import.meta and that you would like to use this value. Vite doesn’t touch your Blade files.

That’s why a possible solution would be, in your Blade template, to refer to that value using not env() but config('something.my_url), itself referring to a /config/something.php containing env('VITE_APP_URL'):

return [
  'my_url' => env('VITE_APP_URL'),
];

So you have basically to ways to use your .env variables:

PHP: .env -> config file -> config()
JS .env -> import.meta.env (thanks to Vite)

trevorpan

3 years ago

Level 15

Excellent!

Wish I had considered that. Using the basic app.php was able wire that up. console.log('{{ config('app.url') }}' + 'auctions/job-credits/update')

Thank you @meduz

Trevor

1 like

Please or to participate in this conversation.