search

supabase / supabase-js

An isomorphic Javascript client for Supabase. Query your Supabase database, subscribe to realtime events, upload and download files, browse typescript examples, invoke postgres functions via rpc, invoke supabase edge functions, query pgvector.
https://supabase.com
MIT License
2.86k stars 220 forks source link

supabase-js fails with @sveltejs/kit (warning, sveltejs/kit is experimental) #89

Closed andykais closed 3 years ago

andykais commented 3 years ago

Bug report

adding

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

into any script tag in a svelte project will cause a 500.

Describe the bug

I believe this has to do with svelte kit renders being executed on both the server side and client side. It also appears to be related to the javascript parser they use (meriyah). Starting the project, and opening a page containing the supabase import results in the following error:

500
[778:36]: Unexpected token: 'get'

SyntaxError: [778:36]: Unexpected token: 'get'
    at report (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:182:11)
    at matchOrInsertSemicolon (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:2096:9)
    at parseLetIdentOrVarDeclarationStatement (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:3024:9)
    at parseStatementListItem (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:2595:20)
    at parseBlock (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:2692:19)
    at parseTryStatement (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:2958:19)
    at parseStatement (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:2641:20)
    at parseStatementListItem (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:2611:20)
    at parseFunctionBody (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:3800:19)
    at parseFunctionExpression (/home/andrew/Code/development/telebum3/web/node_modules/.pnpm/@sveltejs/kit@1.0.0-next.5/node_modules/node_modules/.pnpm/meriyah@3.0.3/node_modules/meriyah/dist/meriyah.esm.js:4389:18)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository: repro repo: https://github.com/andykais/supabase-svelte-kit-bug-repro

  1. npm install
  2. npm run dev
  3. Go to http://localhost:3000
  4. See error

Expected behavior

supabase should ideally work in both the client and server environments of svelte kit.

Screenshots

N/A

System information

Additional context

Note: this is an error that is present in an experimental web framework. It is therefore likely a result of this project not being fully featured. Still, this feels like it is worth tracking.

I attempted dropping the supabase-js built files into the meriyah online compiler to see if the errors were visible there. However it appeared to compile the js code without any issue. There may be specific knobs that svelte kit has tweaked which cause the Unexpected token error, but I am unsure.

andykais commented 3 years ago

on a related note, building the project (as opposed to running the dev server) results in this error:

 andrew  sveltekit-supabase-bug  npm run build

> sveltekit-supabase-bug@0.0.1 build /home/andrew/Code/development/sveltekit-supabase-bug
> svelte-kit build

Transforming...
  ✔ client
  ✔ server
Optimizing...
  ⧗ client
  ⧗ server
> 'process' is imported but could not be bundled
Error: 'process' is imported but could not be bundled
    at error (/home/andrew/Code/development/sveltekit-supabase-bug/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at throwPluginError (/home/andrew/Code/development/sveltekit-supabase-bug/node_modules/rollup/dist/shared/rollup.js:17949:12)
    at Object.error (/home/andrew/Code/development/sveltekit-supabase-bug/node_modules/rollup/dist/shared/rollup.js:18556:24)
    at find_deps (/home/andrew/Code/development/sveltekit-supabase-bug/node_modules/@sveltejs/kit/src/api/build/index.js:164:13)
    at /home/andrew/Code/development/sveltekit-supabase-bug/node_modules/@sveltejs/kit/src/api/build/index.js:159:11
    at Array.forEach (<anonymous>)
    at find_deps (/home/andrew/Code/development/sveltekit-supabase-bug/node_modules/@sveltejs/kit/src/api/build/index.js:154:17)
    at get_deps (/home/andrew/Code/development/sveltekit-supabase-bug/node_modules/@sveltejs/kit/src/api/build/index.js:174:7)
    at /home/andrew/Code/development/sveltekit-supabase-bug/node_modules/@sveltejs/kit/src/api/build/index.js:188:37
    at Array.forEach (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sveltekit-supabase-bug@0.0.1 build: `svelte-kit build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the sveltekit-supabase-bug@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/andrew/.npm/_logs/2020-12-04T19_14_36_594Z-debug.log

which seems to clearly be stating that it is attempting to bundle the built in nodejs module process for the browser.

utherpally commented 3 years ago

Updated: The issue context is @supabase/gotrue-js using process to detect constants

The issue from @sveltejs/kit itself

They treat process as external package and prevent snowpack:rollup-plugin-node-process-polyfill handle it for the browser. From @sveltejs/snowpack-config/snowpack.config.js:

/* ... */
installOptions: {
  // ignore `import fs from 'fs'` etc
  externalPackage: require('module').builtinModules  // NOTE: this include `process` package
},
/* ... */

My workaround for @sveltejs/kit users:

// From your project snowpack.config.js, add this:
// ...
installOptions: {
  externalPackage: require('module').builtinModules.filter(pkg_name => pkg_name !== "process")
},
// ...

My English is not good

kiwicopple commented 3 years ago

Hey @langbamit I just released a new version. Can you please reinstall supabase npm install @supabase/supabase-js@latest and try again?

andykais commented 3 years ago

@kiwicopple, @langbamit thanks for your help. I just updated the deps to latest and added the suggested fix to my snowpack.config.js, I still see the same error.

 andrew  sveltekit-supabase-bug  npm ls --depth=0
sveltekit-supabase-bug@0.0.1 /home/andrew/Code/development/sveltekit-supabase-bug
├── @supabase/supabase-js@1.1.4
├── @sveltejs/adapter-node@1.0.0-next.0
├── @sveltejs/kit@1.0.0-next.17
├── @sveltejs/snowpack-config@1.0.0-next.0
└── svelte@3.31.2

I have updated the repro repo here https://github.com/andykais/supabase-svelte-kit-bug-repro

utherpally commented 3 years ago

SyntaxError: [778:36]: Unexpected token: 'get' This issue related to https://github.com/meriyah/meriyah/issues/164 issue, which is fixed in v4.0.0. We can't testing it by add resolutions: { "meriyah": "4.0.0" } to prepro repo, because @sveltejs/kit bundled this package inside their code (svelte-kit still in alpha state)

I think we can close this issue now.

msyyn commented 3 years ago

This issue should be closed and new issue made if it still persists with the open beta version of sveltekit. Should be noted that Sveltekit dropped Snowpack and use Vite instead (https://github.com/vitejs/vite)

swyxio commented 3 years ago

hi, yes there is still an issue with the public beta version of sveltekit (or more probably, vite)

this is the error that happens when i require supabase in an api route:

500
ENOENT: no such file or directory, open '/Users/swyx/Work/testbeds/trysveltething/fullstack-sveltekit/node_modules/@supabase/supabase-js/src/index.ts'

Error: ENOENT: no such file or directory, open '/Users/swyx/Work/testbeds/trysveltething/fullstack-sveltekit/node_modules/@supabase/supabase-js/src/index.ts'

i have no idea where the /src/index.ts reference comes from, it doesnt show up in the module's package.json....

update: looks like it's getting it from the sourcemap https://github.com/sveltejs/kit/issues/673

ixxie commented 3 years ago

FWIW - installing as a dev dependency seems to resolve the issue in my SvelteKit project: npm install -D @supabase/supabase-js.

mankins commented 3 years ago

Instead of your import, maybe:

import _supabase from '@supabase/supabase-js';
const {createClient} = __supabase;

Idea from here.

ixxie commented 3 years ago

@mankins - unfortunately this doesn't seem to work, neither with supabase-js as a dev dependency nor as a prod dependency.

ixxie commented 3 years ago

I found this note in the SvelteKit FAQ which may be relevant:

question: How do I fix the error I'm getting trying to include a package?

Most of these issues come from Vite trying to deal with non-ESM libraries. You may find helpful examples in the Vite issue tracker. The most common solutions would be to try moving the package between dependencies and devDependencies or trying to include or exclude it in optimizeDeps. Packages which use exports instead of module.exports are currently failing due to a known Vite issue. You should also consider asking the library author to distribute an ESM version of their package or even converting the source for the package entirely to ESM.

You should also add any Svelte components to ssr.noExternal. We hope to do this automatically in the future by detecting the svelte field in a package's package.json.

As suggested, I just tried to include or exclude @supabase/supabase-jsin optimizeDeps in my svelte.config.cjs under vite but this not only didn't work for prod, it also broke the previously working npm run dev.

That leads me to wonder if somewhere in the dependency tree, we need to ask some package maintainer to provide ESM support?

benmccann commented 3 years ago

This bug report is old. It's from when SvelteKit was built on top of Snowpack. SvelteKit is now built on Vite and meriyah was removed as part of that transition: https://github.com/sveltejs/kit/pull/409. I can't find meriyah in the SvelteKit dependencies anymore. Can you make sure you're using the latest version of SvelteKit? If so, and there's still an issue, can you share the new stack trace?

benmccann commented 3 years ago

Oh, nevermind. I see the comment above that there was a new error: https://github.com/supabase/supabase-js/issues/89#issuecomment-807151173. But then I'm really confused because the next message says it's been fixed: https://github.com/supabase/supabase-js/issues/89#issuecomment-809385143

I think we should probably file a new issue and close this one which has gotten quite muddled. I can't tell what issue exists if any

ixxie commented 3 years ago

Yeah it seems a similar issue is happening in Vite; it has to do with the bundler managing a mixture of CSJ and ESM modules as far as I can tell. Someone mentioned this is a growing pain for these next generation build tools which leveral native ESM imports.

I'll try and draft a new issue on this topic today still; I'm collecting as much info as I can to elucidate it.

benmccann commented 3 years ago

If you're using SvelteKit's adapter-node or adapter-static you can use the trick of putting Supabase in devDependencies as a workaround. For everyone else I believe you will need Supabase's sourcemap to be fixed and this issue should be closed in favor of https://github.com/supabase/supabase-js/issues/153

kiwicopple commented 3 years ago

OK #153 is resolved now 👍 . Let me know if this one can also be closed

benmccann commented 3 years ago

Now that the sourcemap issue has been fixed we can see the real underlying error which is https://github.com/supabase/supabase-js/issues/155. I think this issue could be closed in favor of that one