Vue - Ralat Supabase semasa melaksanakan NPM run npm

Question

Jadi saya sedang membangunkan aplikasi Vue. Kemudian saya ingin menambah bahagian belakang menggunakan Supabase dan menggunakan Vercel. Walau bagaimanapun, selepas saya menambah elemen bahagian belakang padanya, apabila saya melaksanakan npm runserve ia melemparkan ralat berikut:

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

Ada sesiapa tahu apa maksudnya? Saya mempunyai apl Vue lain yang disediakan dengan Vite dan ia berfungsi dengan baik secara tempatan, tetapi tidak begitu baik dalam apl Vue ini yang tidak disediakan dengan Vite.

Answer 1

Tukar pembolehubah .env daripada VITE_SUPABASE_URL kepada VUE_APP_SUPABASE_URL dan tukar import.meta.env kepada process.env.

Contoh:

Mulai sekarang

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)

Itu sahaja

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