Vue - Supabase error while doing NPM run npm - vue.js

Question

So I have a Vue application that I was working on. Later I wanted to add a backend to it using Supabase and deploy to Vercel. However, after I added the backend elements to it, it throws the following error when I did npm run serve:
ERROR Failed to compile with 1 error 1:31:54 PM
error in ./src/supabase.js
Module parse failed: Unexpected token (2:24)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| import { createClient } from "#supabase/supabase-js";
> var supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
| var supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
| export var supabase = createClient(supabaseUrl, supabaseAnonKey);
Anyone knows what this means? I have another Vue app that was set up via Vite and it ran fine in local, but not in this Vue app that wasn't set up by Vite.

Answer 1

change your .env variable from VITE_SUPABASE_URL to VUE_APP_SUPABASE_URL and import.meta.env to process.env.
Example:
From this
import { createClient } from '#supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
To this
import { createClient } from "#supabase/supabase-js";
const supabaseUrl = process.env.VUE_APP_SUPABASE_URL;
const supabaseAnonKey = process.env.VUE_APP_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseAnonKey);