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

[toph4xor0830]

Summary

Good day,

Please help me to my problem when I import @vercel/postgres to my next js project this warning appear

./node_modules/.pnpm/[email protected]/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/.pnpm/[email protected]/node_modules/node-gyp-build/index.js
./node_modules/.pnpm/[email protected]/node_modules/utf-8-validate/index.js
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/ws/lib/validation.js
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/ws/lib/sender.js
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/@[email protected]/node_modules/@vercel/postgres/dist/index-node.js
./src/lib/actions.js

Thank you!

Additional information

Node Version: v20.9.0

"dependencies": {
    "@vercel/postgres": "latest",
    "bcrypt": "latest",
    "lucide-react": "latest",
    "next": "canary",
    "next-auth": "beta",
    "react": "canary",
    "react-dom": "canary"
},
"devDependencies": {
    "autoprefixer": "latest",
    "dotenv": "latest",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "postcss": "latest",
    "tailwindcss": "latest"
},
"engines": {
    "node": ">=18"
}

Example

No response

[mutasim77]

when I import

Could you please share the import line?

[CRSylar]

same problem with supabase and the new @supabase/ssr module

[JeremyKennedy]

Same issue here.

page.tsx

import { db } from "@/db/db";
import { SignupsTable } from "@/db/schema";

export default async function Home() {
  const signups = await db.select().from(SignupsTable);

  return (
    <div>
      {signups.map((user) => (
        <div key={user.email}>{user.email}</div>
      ))}
    </div>
  );
}

db.ts

import { sql } from "@vercel/postgres";
import { drizzle } from "drizzle-orm/vercel-postgres";

// Connect to Vercel Postgres
export const db = drizzle(sql);

[dejongyeong]

I found a forum that discusses something similar: https://www.reddit.com/r/Supabase/comments/17xyj9t/supabase_oauth_with_nextjs_14_and_react_not/

I ran npm update and the error disappeared.

[JeremyKennedy]

Thank you for the link and comment. It works now!

I ran pnpm up, it only updated tsx. Assuming that was useless, I then added the override to my package.json as described on your link:

 "overrides": {
    "node-gyp-build": "4.6.1"
  }

I then ran pnpm i and it seems no dependencies were changed due to that override. So I removed the override. Ran a pnpm i again. Finally tested, couldn't repro the error anymore. Yay! But why? The override did nothing, and I didn't think a tsx update would fix anything. Turns out the tsx update updated the node-gyp-build dependency from 4.7.0 to 4.7.1, which must have fixed it.

Thank you!

[dejongyeong]

Yes. I did look at the package-lock.json after updating and it does update the node-gyp-build dependency to 4.7.1 and all related errors are fixed.

[Hakira-Shymuy]

Hmm, he seems do override node-gyp-build Is exactly where the problem comes from, im going to test it "overrides": { "node-gyp-build": "4.6.1" } A quinta, 23/11/2023, 20:56, De Jong Yeong ***@***.***> escreveu:

…

I found a forum that discusses something similar: https://www.reddit.com/r/Supabase/comments/17xyj9t/supabase_oauth_with_nextjs_14_and_react_not/ I ran npm update and the error disappeared. — Reply to this email directly, view it on GitHub <#58626 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARM5ELQOB7GQBOBE3YMJSNLYF6S6JAVCNFSM6AAAAAA7Q3UR72VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TMNJUG44DO> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[mwawrusch]

I have seen this with quite a few libraries, starting to happen with the later next.js 13.x versions. It is a huge detriment to developer experience as we get 100 lines like this in our build output:

Import trace for requested module:
../../node_modules/tier/dist/mjs/get-client.js
../../node_modules/tier/dist/mjs/index.js
../../backend-domains/roji-domain-pricing-backend/src/tierClient.ts
../../backend-domains/roji-domain-pricing-backend/index.tsx
../../backend-domains/roji-domain-pro/src/domainCreateOrganization.ts
../../backend-domains/roji-domain-pro/index.tsx
./src/app/(pro)/_components/ensureUserAndOrganizationAction.tsx
./src/app/(pro)/pro/[organizationIdOrSlug]/(contractlevel)/contracts/[network]/[address]/chips/import/prepareImport.actions.ts
 ⚠ ../../node_modules/node-gyp-build/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Does anyone have a webpack config to get rid of those warnings?

[hsglc]

if you use pnpm. I ran pnpm update and then it updated the @supabase/supabase-js to 2.38.5 version. Finally, the warning has gone.

[mwawrusch]

Thanks, we are on traditional NPM still. So looks like this is more of a module packager problem. For reference, what's your node version?

[hsglc]

My current node version is v19.4.0. Yeah you're right. It seems a module packager problem.

[Hakira-Shymuy]

Hi, node version 20.10.0 A domingo, 26/11/2023, 21:34, Martin Wawrusch ***@***.***> escreveu:

…

Thanks, we are on traditional NPM still. So looks like this is more of a module packager problem. For reference, what's your node version? — Reply to this email directly, view it on GitHub <#58626 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARM5ELTTVS2BK7LZEMI4BWTYGORWHAVCNFSM6AAAAAA7Q3UR72VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TMNZUGU3TQ> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[taheramr]

any updates about this? we are get a similar error with a react-view package in our NextJS@14 app.

here is an example of the logs:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
Import trace for requested module:
../../node_modules/@babel/core/lib/config/files/plugins.js
../../node_modules/@babel/core/lib/config/files/index.js
../../node_modules/@babel/core/lib/index.js
../../node_modules/react-view/dist/es/ui/compiler.js
../../node_modules/react-view/dist/es/index.js
./components/playground/index.tsx

[zaini]

Similar error with this library libheif-js which I'm getting from heic-convert

/node_modules/libheif-js/libheif-wasm/libheif-bundle.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

[ntgussoni]

Happens the same on here replicate/replicate-javascript#345