Uncaught ReferenceError: process is not defined

[Penkie]

Bug report

Describe the bug

Using Angular, creating the client produce this error on the console: Uncaught ReferenceError: process is not defined

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create Angular project
2. Install supabase-js
3. Create angular service
4. Import createClient with supabase-js on top of the newly created service
5. Add that on top of the file, after the import const supabase = createClient('yoururl', 'yourkey')
6. Link service to component
7. See result in console

Expected behavior

No errors should happen

System information

• OS: MacOS Big Sur
• Browser (if applies) Firefox
• Version of supabase-js: v1.1.3
• Version of Node.js: v12.18.3

[emschwartz]

I think this may have been fixed by https://github.com/supabase/gotrue-js/pull/37 What version of gotrue-js is it pulling in?

[kiwicopple]

:tada: This issue has been resolved in version 1.1.4 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[Penkie]

I updated supabase-js to 1.1.4 and checked that gotrue-js is 1.9.3 (wich is the case) and I'm still having this issue

[kiwicopple]

OK thanks for the update @Penkie . Reopening to investigate ..

[kiwicopple]

1. Create Angular project
2. Create angular service

Could you please set this up on codesandbox or give some instructions? I've never used angular, this would probably take me an hour to figure out. Even better if you can start ad branch with anangular-todo-list in our examples. That would be massively helpful for the community (but not necessary, I just need a way to debug this)

[Penkie]

I tried with stackblitz, no problem I didn't have any errors. Tried also on codesandbox, loads of problems, maybe the dependencies not working. Anyway I created a repo with the Angular project inside : https://github.com/Penkie/supabase-js-debug-angular You can check there Note that I did not create any service (like I mentionned up there that you have to, but actually no you don't), so everything is on app.component.ts

[laurentS]

For what it's worth, I'm having the same issue in a svelte/sapper app. For now, I'm bypassing the error with window.process = window.process || null in the page's script. It's not exactly ideal, but for now I can move on :)

I've setup a basic repro repo at https://github.com/laurentS/supabase-bug-repro-113 to reproduce:

• clone the repo
• yarn install
• yarn run dev
• open the landing page (should be http://localhost:3000) and watch the error message appear after a few milliseconds

All it takes is importing the supabase client (see the last commit in the main branch). Hope this helps!

[soedirgo]

Looks like gotrue-js is using process.env, which makes it non-isomorphic. https://github.com/supabase/gotrue-js/pull/37 moves the problem to the bundler (Rollup) instead, which wasn't able to match-replace process.env. So if you add "process": undefined in the Rollup replace plugin in laurentS's example above, the app works.

Can we maybe refactor gotrue-js to use e.g. default parameters when initializing the client instead?

[inian]

Error report from @thorwebdev our unpkg build (https://unpkg.com/@supabase/supabase-js@1.1.4/dist/umd/supabase.js) is erroring

[kiwicopple]

Hey @soedirgo - just checking on this commit

particularly these lines:

    new webpack.DefinePlugin({
      'process.env.GOTRUE_URL': undefined,
      'process.env.AUDIENCE': undefined,
      'process.env.EXPIRY_MARGIN': undefined,
      'process.env.STORAGE_KEY': undefined,
    }),

Is there a webpack plugin that can fix this issue for browser builds? Maybe this?

[soedirgo]

Huh, I don't remember adding those... let me try that.

[soedirgo]

Hey @Penkie, can you update the supabase-js client and see if it works now? I tried @laurentS's Sapper app with the update and saw no issue.

Edit: my bad, it's still not working. Give me a moment.

[soedirgo]

So using the Webpack plugin above wouldn't fix it, because it only affects the browser build that's in dist/umd. So the change needs to be in the user's bundler config.

@kiwicopple is there a specific reason to use process.env in gotrue-js? Looks like it's only used as default options for the client. Otherwise I can make a quick PR to fix this.

[kiwicopple]

is there a specific reason to use process.env in gotrue-js

That was just as a convenience, but looks like it's problematic. How are these usually handled in isomorphic libs? Using dotenv?

[soedirgo]

I don't think libraries in general use process.env, only apps. Maybe it's possible to use Webpack for all 3 builds, but that's an antipattern (bundling should be done by end-user apps, not libraries), and more trouble than it's worth, IMO.

[jhoch]

For another data point, I was running into a similar issue, and applied the fix you put up in https://github.com/supabase/gotrue-js/pull/42 locally, and it resolved the issue.

[kiwicopple]

OK , just pushing the new version - I'll keep it open this time until we've confirmed that it's resolved

[kiwicopple]

:tada: This issue has been resolved in version 1.3.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[soedirgo]

Should be working now, when trying laurentS's example above make sure to yarn upgrade first. Let us know if it works for y'all!

[malobre]

Updating to 1.3.2 did fix the problem for me.

[kiwicopple]

thanks for the patience everyone! We're super busy, so a bit slow getting to some of these items. I'll close this, and feel free to reopen if you have any issues

And thanks for checking out Supabase ⚡