Vue - Supabase error when executing NPM run npm
P粉121081658
P粉121081658 2024-03-27 14:38:27
0
1
385

So I'm developing a Vue application. Later I wanted to add a backend using Supabase and deploy to Vercel. However, after I add the backend element to it, when I execute npm runserve it throws the following error:

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);

Does anyone know what this means? I have another Vue app set up with Vite and it runs fine locally, but not so well in this Vue app that is not set up with Vite.

P粉121081658
P粉121081658

reply all(1)
P粉129731808

Change the .env variable from VITE_SUPABASE_URL to VUE_APP_SUPABASE_URL, and change import.meta.env to process.env.

Example:

From now on

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 point

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);
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template