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

andykais · 2020-12-04T19:14:02Z

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

npm install
npm run dev
Go to http://localhost:3000
See error

Expected behavior

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

Screenshots

N/A

System information

OS: Linux, macOS
Browser: Firefox & Chrome
Version of supabase-js: 1.0.7
Version of Node.js: 14.15.1

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.

The text was updated successfully, but these errors were encountered:

andykais · 2020-12-04T19:16:11Z

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 · 2021-01-06T06:52:05Z

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 · 2021-01-06T13:22:09Z

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

andykais · 2021-01-06T15:34:31Z

@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 · 2021-01-15T15:43:40Z

SyntaxError: [778:36]: Unexpected token: 'get'
This issue related to meriyah/meriyah#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 · 2021-03-21T10:50:20Z

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 · 2021-03-25T17:33:37Z

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 sveltejs/kit#673

ixxie · 2021-03-29T13:39:47Z

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

mankins · 2021-04-13T11:24:02Z

Instead of your import, maybe:

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

Idea from here.

ixxie · 2021-04-13T11:34:53Z

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

ixxie · 2021-04-13T12:00:45Z

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 · 2021-04-13T14:33:20Z

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: sveltejs/kit#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 · 2021-04-13T14:37:11Z

Oh, nevermind. I see the comment above that there was a new error: #89 (comment). But then I'm really confused because the next message says it's been fixed: #89 (comment)

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 · 2021-04-13T15:09:27Z

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 · 2021-04-14T08:17:20Z

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 #153

kiwicopple · 2021-04-14T13:19:35Z

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

benmccann · 2021-04-14T15:18:02Z

Now that the sourcemap issue has been fixed we can see the real underlying error which is #155. I think this issue could be closed in favor of that one

andykais added the bug Something isn't working label Dec 4, 2020

andykais changed the title ~~supabase-js fails with @sveltejs/kit (warning, sveltejs/kit is still experimental)~~ supabase-js fails with @sveltejs/kit (warning, sveltejs/kit is experimental) Dec 4, 2020

kiwicopple mentioned this issue Jan 14, 2021

Fix bugs supabase/auth-js#42

Merged

benmccann mentioned this issue Mar 27, 2021

Vite bundles wrong file from Zod vitejs/vite#2639

Closed

benmccann mentioned this issue Mar 29, 2021

Supabase works with Vite but not SvelteKit dev mode sveltejs/kit#673

Closed

kiwicopple closed this as completed Apr 15, 2021

kiwicopple mentioned this issue Apr 18, 2021

"XMLHttpRequest is not defined" on sveltekit endpoints when deployed on Vercel #154

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

andykais commented Dec 4, 2020

andykais commented Dec 4, 2020

utherpally commented Jan 6, 2021 •

edited

Loading

kiwicopple commented Jan 6, 2021

andykais commented Jan 6, 2021

utherpally commented Jan 15, 2021

msyyn commented Mar 21, 2021 •

edited

Loading

swyxio commented Mar 25, 2021 •

edited

Loading

ixxie commented Mar 29, 2021

mankins commented Apr 13, 2021 •

edited

Loading

ixxie commented Apr 13, 2021

ixxie commented Apr 13, 2021 •

edited

Loading

benmccann commented Apr 13, 2021

benmccann commented Apr 13, 2021

ixxie commented Apr 13, 2021

benmccann commented Apr 14, 2021

kiwicopple commented Apr 14, 2021

benmccann commented Apr 14, 2021

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

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

Comments

andykais commented Dec 4, 2020

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

andykais commented Dec 4, 2020

utherpally commented Jan 6, 2021 • edited Loading

kiwicopple commented Jan 6, 2021

andykais commented Jan 6, 2021

utherpally commented Jan 15, 2021

msyyn commented Mar 21, 2021 • edited Loading

swyxio commented Mar 25, 2021 • edited Loading

ixxie commented Mar 29, 2021

mankins commented Apr 13, 2021 • edited Loading

ixxie commented Apr 13, 2021

ixxie commented Apr 13, 2021 • edited Loading

benmccann commented Apr 13, 2021

benmccann commented Apr 13, 2021

ixxie commented Apr 13, 2021

benmccann commented Apr 14, 2021

kiwicopple commented Apr 14, 2021

benmccann commented Apr 14, 2021

utherpally commented Jan 6, 2021 •

edited

Loading

msyyn commented Mar 21, 2021 •

edited

Loading

swyxio commented Mar 25, 2021 •

edited

Loading

mankins commented Apr 13, 2021 •

edited

Loading

ixxie commented Apr 13, 2021 •

edited

Loading