Can't Import supabase in JavaScript - unable to resolve module specifier

[TheRog-007]

Trying to use supabase in JavaScript.

installed via terminal using:

npm install @supabase/supabase-js

Copied the example from the API section on the supabase website but the import part does not work:

import { createClient } from "@supabase/supabase-js";

It produces the error:

"unable to resolve module specifier"

Had a fish around and discovered the actual location of @supabase so edited thus:

import { createClient } from "../node_modules/@supabase/supabase-js";

Result - NOTHING no code in the code module is read. Set import location as. ../ as the code module that contains the import command is in a sub folder (./Modules)

Code module is not even being accessed by the browser, how did I determine this? Deleted all code in the module then added:

alert("this runs first";
import { createClient } from "../node_modules/@supabase/supabase-js";

The alert command is NEVER run...??

If I delete the import command everything works..!

Why does the connection example on the supabase website not work? Why does pointing to the location of the @supabase/supabase-js folder result in the module being completely ignored? How is it possible to actually get the import command to work?

[j4w8n]

Can you tell us a bit more about your environment and context? What file is this code in? Are you using a bundler?

[TheRog-007]

Writing in native JavaScript is VSCode very simple only 3 files: index.html with just basic HTML template data no forms or anything,, style,css, just changes the body background colour and script.js which only contains the import command that does not work and an alert command after it for debugging (alert message never shown)

No bundles, no wrappers just copied the example from the supabase website:

import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'https://fkpvyafipelhbhyiznwt.supabase.co'
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)

The import line creates a relative reference error (why?) if I add the full path result is no code is execute passed the import line BUT no error is reported !!??

Just tried: moved the @supabase folder out of node_modules into the root folder with the HTML file etc in it, import { createClient } from @supabase/supabase-js still not recognised get the relative reference error, SO added / : from "/@supabase-supabase-js@ that error goes away now get Chrome console error:

_supabase-js/:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"

??

[j4w8n]

I was able to get a basic version of this working and running with bun. How are you trying to run the script.js file?

[TheRog-007]

script.js is linked in the HTML file so that runs it effectively, and that import statement produces a relative reference error on every machine I have tried it on. The supabase web site does not mention using any special environments to run, surely having a barebones HTML file linked to the script file should work?

[j4w8n]

Oh, ok. This isn't my area of expertise - so as soon as I say something it'll probably be wrong - but I'm guessing that's where you'd need to be using a bundler or framework to help out with that. And, to my knowledge, Supabase doesn't have a non-build-step version of their code that you can use as the src in your script tag.

[TheRog-007]

Had an idea! Thought "does it need node.js?"

• Uninstalled then installed supabase via npm
• Installed node.js via npm

Now import command as on the website and as user j4w8n used it now works..however browser console now shows this error:

Source map error: Error: NetworkError when attempting to fetch resource. Resource URL: moz-extension://57a21d84-ab67-416d-99f9-ba5cef8485f5/content_script.js Source Map URL: index.js.map

??

Getting closer..