auth-helpers: @supabase/auth-helpers-nextjs: `createBrowserSupabaseClient` doesn't work in `next@13.3.0` - `Module not found: Can't resolve 'fs'`

Bug report

I confirm this is a bug with Supabase, not with my own application.
I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

This package internally imports next/server even in browser bundles. That was not problematic in earlier versions of next, but this is an issue in the latest next@13.3.0.

This code can’t be bundled to a client: https://github.com/supabase/auth-helpers/blob/main/packages/nextjs/src/middleware/withMiddlewareAuth.ts#L1-L2

I recommend fixing this using different bundles for each environment with exports field in package.json, we use that in packages like https://github.com/vercel/otel

To Reproduce

Try building this: https://github.com/jankaifer/next-repro-supabase

Expected behavior

It builds without error.

Screenshots

> @ build /home/pearman/dev/playground/supabase
> next build

warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

Failed to compile.

./node_modules/.pnpm/next@13.2.5-canary.34_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/@vercel/og/index.node.js
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/next@13.2.5-canary.34_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/web/spec-extension/image-response.js
./node_modules/.pnpm/next@13.2.5-canary.34_biqbaboplfbrettd7655fr4n2y/node_modules/next/server.js
./node_modules/.pnpm/@supabase+auth-helpers-nextjs@0.5.9_7jdpwtii2ojrsp4bzhat4kanty/node_modules/@supabase/auth-helpers-nextjs/dist/index.js
./app/page.tsx


> Build failed because of webpack errors
info  - Creating an optimized production build . ELIFECYCLE  Command failed with exit code 1.

System information

OS: Linux (NixOS)
Browser (if applies) [e.g. chrome, safari]
Version of supabase-js: 2.14.0
Version of Node.js: v18.12.1

Additional context

We added @vercel/og import in next/server. This package doesn’t work in the browser and that causes this issue.

next/server was never intended to be imported on the client next just didn’t enforce this.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 20
Comments: 20 (6 by maintainers)

Most upvoted comments

We are working on resolving this issue and will try and get a fix out today.

+15

silentworks on Apr 7, 2023

Missing module seems to be resolved but there seems to be an issue with createMiddlewareSupabaseClient being used in middleware which uses Edge Runtime Zrzut ekranu 2023-04-7 o 17 00 43

KajSzy on Apr 7, 2023

I just released version 0.6.0 of the @supabase/auth-helpers-nextjs which should fix this issue. Please report back here if there are any issues.

silentworks on Apr 7, 2023

@mryechkin @stern-shawn @batuhanbilginn @jmcannon one of you need to provide a minimal reproducible example of this issue also this should be created as a new issue and not tag on to this existing one as the issue the OP posted here was fixed and these aren’t the same things.

silentworks on Apr 9, 2023

@KajSzy @riccardolardi that’s a warning and not an issue since Buffer isn’t used in the case of Edge Runtime and it will fallback to the polyfill implementation of the library. I’m not sure why Next build keeps on showing the warning since it doesn’t get used at runtime.

Hi @silentworks - in my case this looks to be causing the session to not be able to be read inside middleware.js:

const supabase = createMiddlewareSupabaseClient({ req, res });

const {
  data: { session },
} = await supabase.auth.getSession();

console.log({ session });

if (!session) {
  console.log('No session found. Please sign in...');
  return NextResponse.redirect(new URL('/sign-in', req.url));
}

This looks to have broke in 0.5.9, as 0.5.8 and below I don’t get this error and the session reads fine.

mryechkin on Apr 8, 2023

Hi @silentworks - in my case this looks to be causing the session to not be able to be read inside middleware.js:

I’m experiencing this as well with identical code, next 13.2.4 + auth-helpers-nextjs 0.6.0, and 0.5.9 which had previously worked earlier this week… Middleware is unable to parse the session in local development, but somehow is working fine in deployments now.

Pinning to 0.5.8 also resolves the issue.

Failed to parse cookie string: [Error: The edge runtime does not support Node.js 'buffer' module.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime]
{ session: null }

stern-shawn on Apr 8, 2023

@KajSzy @riccardolardi that’s a warning and not an issue since Buffer isn’t used in the case of Edge Runtime and it will fallback to the polyfill implementation of the library. I’m not sure why Next build keeps on showing the warning since it doesn’t get used at runtime.

silentworks on Apr 7, 2023

Started playing with Supabase yesterday with a fresh Next.js install, all boilerplate code from the docs. I’m also facing the middleware issue - seeing the Failed to parse cookie string error and can’t get a session in middle.js.

jmcannon on Apr 9, 2023

We are seeing this also, FWIW you can safely upgrade to 13.2.5-canary.22 if you are interested. After that it seems to start throwing this error.

imownbey on Apr 6, 2023