Why does VITE_ENV on my project throw an error – Blancer.com Tutorials and projects

I am working on a project and I want to use VITE_ENV to access environmental variables instead of dotenv, I have the dotenv package installed though.

I have used the same exact illustration in vite’s docs

#.env file

VITE_SOME_KEY=123
DB_PASSWORD=foobar

#main.js file

console.log(import.meta.env.VITE_SOME_KEY); //I am expecting > "123"
console.log(import.meta.env.DB_PASSWORD); //I am expecting > undefined

but I get the error

console.log(import.meta.env.VITE_SOME_KEY); // "123"
                            ^

TypeError: Cannot read properties of undefined (reading 'VITE_SOME_KEY')
    at file:///Users/oluwajolasun/Documents/Software%20Engineering/Projects/env%20test/env-test/main.js:1:29
    at ModuleJob.run (node:internal/modules/esm/module_job:262:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:485:26)
    at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:109:5)

Node.js v22.5.1

My example project folder structure