import.meta undefined in components (Vite/Vue3)

Question

I am trying to access the import.meta.env Variable 'APP_SOCKET_URL' in my component but it says Uncaught TypeError: import_meta.env is undefined

In my main.js file import.meta.env works fine. In all other files it doesn't work and I don't know why. Maybe someone can help me there.

Here is the code of my data function:

data() {
  const socket = new Socket(import.meta.env.APP_SOCKET_URL || `ws://${location.href}/ws`);
  return {
    socket
  };
}

In my .env file I added:

APP_SOCKET_URL="ws://localhost:8765"

And in my vite.config I changed the envPreix to "APP_"

Here is my Setup:

Vite Version 3.1.4 <br>
Vue 3 Version 3.2.40
Programming in Typescript
Thanks and have a nice day!

EDIT:

I found the error. If I change the script lag from 'ts' to 'js' it works. So the problem is with typescript, but I don't know how to fix that.

Answer 1

All environment vars in a Vite app must begin their identifier with VITE_

So your var may now look like: VITE_APP_SOCKET_URL="ws://localhost:8765"