search

Home  >  Q&A  >  body text

Vue - Supabase error when executing NPM run npm

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粉121081658P粉121081658272 days ago383

reply all(1)I'll reply

  • P粉129731808

    P粉1297318082024-03-28 09:42:42

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

    reply
    0
  • Cancelreply