Vue - Erreur Supabase lors de l'exécution de NPM, exécutez npm

Question

Je développe donc une application Vue. Plus tard, j'ai voulu ajouter un backend en utilisant Supabase et déployer sur Vercel. Cependant, après y avoir ajouté l'élément backend, lorsque j'exécute npm runserve, l'erreur suivante apparaît :

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

Est-ce que quelqu'un sait ce que cela signifie ? J'ai une autre application Vue configurée avec Vite et elle fonctionne correctement localement, mais pas très bien dans cette application Vue qui n'est pas configurée avec Vite.

Answer 1

Changez la variable .env de VITE_SUPABASE_URL en VUE_APP_SUPABASE_URL et remplacez import.meta.env par process.env.

Exemple :

À partir de maintenant

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)

C'est ça

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