Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[bmakr]

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

I'm receiving this warning (wasn't receiving previous to reinstalling package.json):

./node_modules/node-gyp-build/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/node-gyp-build/index.js
./node_modules/bufferutil/index.js
./node_modules/websocket/lib/WebSocketFrame.js
./node_modules/websocket/lib/websocket.js
./node_modules/websocket/index.js
./node_modules/@supabase/realtime-js/dist/main/RealtimeClient.js
./node_modules/@supabase/realtime-js/dist/main/index.js
./node_modules/@supabase/supabase-js/dist/main/index.js
./app/api/supabase/createClient.ts
./app/api/supabase/index.ts
./app/api/index.ts
./app/decks/ai/create/[id]/page.tsx

When I uninstall "@supabase/supabase-js": "^2.33.1", from the app and remove the client code:

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


const supabaseUrl = process.env.SUPABASE_URL;
const supabaseKey = process.env.SUPABASE_ANON_KEY;

export const supabase = createClient<SupabaseClient<any, "public", any>>(
    `${supabaseUrl}`, 
    `${supabaseKey}`,
    {
        auth: {
            persistSession: false
        }
    }
);

The warning goes away.

To Reproduce

1. Install the package in a nextjs app
2. run next dev

Expected behavior

I expect there to be no warning as nothing seems to be wrong with the code in node-gyp (however I could be wrong) which is added by websocket:

if (typeof require.addon === 'function') { // if the platform supports native resolving prefer that
  module.exports = require.addon.bind(require)
} else { // else use the runtime version here
  module.exports = require('./node-gyp-build.js')
}

System information

• MacOS Sonoma
• next dev cli
• Version of supabase-js: "@supabase/supabase-js": "^2.33.1",
• Version of Node.js: happens in both 16 and 18

Additional context

Let me know if you have any insights or if you think this issue should be posted elsewhere. Thanks!

[bmakr]

The error is coming from webpack: https://github.com/webpack/webpack/blob/87660921808566ef3b8796f8df61bd79fc026108/lib/dependencies/CommonJsImportsParserPlugin.js#L216

[GoktugYalcin]

I'm with same issue and using env:

• macOS Sonoma
• next dev
• @supabase/supabase-js -> "^2.33.1",
• Node.js -> v20.3.1

It renders my data with SSR but error still remains on console.

Below, you can find the error:

Import trace for requested module:
./node_modules/.pnpm/node-gyp-build@4.7.0/node_modules/node-gyp-build/index.js
./node_modules/.pnpm/bufferutil@4.0.8/node_modules/bufferutil/index.js
./node_modules/.pnpm/websocket@1.0.34/node_modules/websocket/lib/WebSocketFrame.js
./node_modules/.pnpm/websocket@1.0.34/node_modules/websocket/lib/websocket.js
./node_modules/.pnpm/websocket@1.0.34/node_modules/websocket/index.js
./node_modules/.pnpm/@supabase+realtime-js@2.8.4/node_modules/@supabase/realtime-js/dist/module/RealtimeClient.js
./node_modules/.pnpm/@supabase+realtime-js@2.8.4/node_modules/@supabase/realtime-js/dist/module/index.js
./node_modules/.pnpm/@supabase+supabase-js@2.38.4/node_modules/@supabase/supabase-js/dist/module/index.js
./node_modules/.pnpm/@supabase+ssr@0.0.10_@supabase+supabase-js@2.38.4/node_modules/@supabase/ssr/dist/index.mjs
./utils/supabase/server.ts
./app/layout.tsx
 ⚠ ./node_modules/.pnpm/node-gyp-build@4.7.0/node_modules/node-gyp-build/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[taychris]

Having the same exact issue

[filipecabaco]

I'm unable to replicate the issue. Can you provide an example repository to ensure I get the correct setup to properly debug it?

Probably I'm unable to replicate it since I'm not using webpack 😓

[taychris]

Yes of course, I created a temporary repository. Link to the repository: https://github.com/taychris/nextjs-supabase.git

Required environment variables: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, NEXT_PUBLIC_ROOT_DOMAIN (should be set to localhost:3000) for the local environment.

Then you just run the npm i command and after that run npm run dev.
In the browser, navigate to app.localhost:3000/categories.
The error/warning can be seen in the terminal.

[filipecabaco]

thank you! 🙏 will still check today

[figintern]

Same here have the problem too

[John4E656F]

Same here. the problem occurs in multiple nextjs + supabase project . With different supabase-js version from @supabase/supabase-js -> "^2.38.2" to @supabase/supabase-js -> "^2.38.4",

[bmakr]

@filipecabaco this issue is also being investigated on node-gyp-build: prebuild/node-gyp-build#62

I also posted a discussion question on webpack: webpack/webpack#17819

[filipecabaco]

thank you! yeah yesterday that was the point I've reached. Also tried to overwrite some of the webpack configurations on nextjs but all the "patches" felt more like really bad hacks 😞 ( i18next/next-i18next#1545 (comment) )

I've also verified what @John4E656F mentioned, this is happening in multiple versions including latest.

I think that this PR might actually tackle this issue #263

[bmakr]

Yep the ws package does not have node-gyp-build. That will fix it!! Thanks

[finom]

Hey guys. Is there a quick workaround? Not sure what happened but after another npm install I've got the same problem with supabase/realtime-js and next.js. I was trying to downgrade supabase/realtime-js but no success. Basically all work with supabase/realtime-js is blocked. I hope somebody has a quick solution. Thanks.

[finom]

Alright, there is a quick workaround I found. Create file in your project /patches/node-gyp-build+4.7.0.patch with the following contents

diff --git a/node_modules/node-gyp-build/index.js b/node_modules/node-gyp-build/index.js
index de2d14d..b1e9794 100644
--- a/node_modules/node-gyp-build/index.js
+++ b/node_modules/node-gyp-build/index.js
@@ -1,5 +1,5 @@
 if (typeof require.addon === 'function') { // if the platform supports native resolving prefer that
-  module.exports = require.addon.bind(require)
+  module.exports = require('./node-gyp-build.js')
 } else { // else use the runtime version here
   module.exports = require('./node-gyp-build.js')
 }

Install https://www.npmjs.com/package/patch-package with npm i -D patch-package

Set up postinstall script:

 "scripts": {
  "postinstall": "patch-package"
 }

Run npm i to trigger.

[bmakr]

The issue went away for me after installing the latest version. I had to delete yarn.lock and run yarn before the warning went away. Also, the upcoming ws pr will ensure it never recurs. Closing the issue now as I opened it.

[cdedreuille]

@bmackio I tested with the latest version of @supabase/realtime-js - Version 2.9.1 and I still have the warnings. Instead of getting them on websocket, I have them on ws instead.

It seems to be fixed in node-gyp-build@4.7.1 but we still have version 4.7.0 installed in several packages.

I solved it by adding the latest version to my dependencies and adding a resolution:

"resolutions": {
  "node-gyp-build": "^4.7.1"
}

This is probably a bad idea but it works for now.