LWC Error: createClient is not defined when using Supabase JavaScript library

Question

I am trying to use the Supabase JavaScript library in an LWC

Documentation

initializing supabase

Supabase JavaScript library:

supabase-js@2

Their example from the documentation:

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

LWC JavaScript

import { loadScript } from 'lightning/platformResourceLoader';
import SUPABASE_JS from '@salesforce/resourceUrl/supabase_js';

...

   initialized = false;

    renderedCallback() {

        if (this.initialized) {
            return;
        }
        this.initialized = true;

        console.log('SUPABASE_JS', SUPABASE_JS);

        Promise.all([
            loadScript(this, SUPABASE_JS),
        ])
            .then(() => {
                this.initializeSUPABASE();
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading SUPABASE',
                        message: error.message,
                        variant: 'error'
                    })
                );
            });
    }

    initializeSUPABASE(){
        const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
        console.log('supabase', supabase);
    }

But I get the error:

createClient is not defined

QUESTIONS

How do I fix it, such that I can access createClient and other methods/classes within the library?

Robs · Accepted Answer · 2023-04-26 23:38:47Z

There is a global variable called supabase

So I was able to do:

    supabaseClient;

    initializeSUPABASE(){
        console.log('supabase', supabase);
        this.supabaseClient = supabase.createClient('https://xyzcompany.supabase.co', 'public-anon-key')
        console.log('supabaseClient', this.supabaseClient);
    }

And later use the supabaseClient

It's worth mentioning that including this lib in your LWC means that you not longer are able to use fetch

I got around this by adding:

<div lwc:ref="iframeContainer" lwc:dom="manual"></div>

And this method:

    restoreFetch() {
        if (!window._restoredFetch) {
            const iframe = document.createElement('iframe');
    
            iframe.style.display = 'none';
            this.refs.iframeContainer.appendChild(iframe);
    
            window._restoredFetch = iframe.contentWindow.fetch;
        }
    
        return window._restoredFetch;
    }

Used like this:

const myFetch = this.restoreFetch();

            const response = await myFetch('https://api.example.com/v1/resource', {
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${apiKey}`
                },
                method: "POST",
                body: JSON.stringify({
                    property1: "value",
                    property2: "value"
                })
            });

Even after fixing the fetch issue, I still could not get supabase to work.

When actually using it against a real supabase connection, I started getting error:

TypeError: t is not a function

And I gave up.

Stack Exchange Network

LWC Error: createClient is not defined when using Supabase JavaScript library

1 Answer 1

You must log in to answer this question.

Hot Network Questions

LWC Error: createClient is not defined when using Supabase JavaScript library

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions