[BUG] - Error Edge Runtime Build

[7elven]

NextUI Version

2.3.6

Describe the bug

when I build with edge runtime, it will error

01:49:23.259	▲ Failed to compile.
01:49:23.259	▲
01:49:23.259	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.259	▲ Attempted import error: 'useContext' is not exported from 'react' (imported as '$bx7SL$useContext').
01:49:23.260	▲
01:49:23.260	▲ Import trace for requested module:
01:49:23.260	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.260	▲ ./node_modules/@react-aria/visually-hidden/dist/import.mjs
01:49:23.260	▲ ./node_modules/@nextui-org/react/dist/index.mjs
01:49:23.260	▲ ./app/layout.tsx
01:49:23.260	▲ ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&page=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pagePath=private-next-app-dir%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage.tsx&appDir=%2Fopt%2Fbuildhome%2Frepo%2Fapp&appPaths=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/tournament/[sport]/[id]/page.tsx?next_edge_ssr_entry
01:49:23.260	▲
01:49:23.260	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.261	▲ Attempted import error: 'useState' is not exported from 'react' (imported as '$bx7SL$useState').
01:49:23.261	▲
01:49:23.261	▲ Import trace for requested module:
01:49:23.261	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.261	▲ ./node_modules/@react-aria/visually-hidden/dist/import.mjs
01:49:23.261	▲ ./node_modules/@nextui-org/react/dist/index.mjs
01:49:23.261	▲ ./app/layout.tsx
01:49:23.261	▲ ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&page=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pagePath=private-next-app-dir%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage.tsx&appDir=%2Fopt%2Fbuildhome%2Frepo%2Fapp&appPaths=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/tournament/[sport]/[id]/page.tsx?next_edge_ssr_entry
01:49:23.262	▲
01:49:23.262	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.262	▲ Attempted import error: 'useRef' is not exported from 'react' (imported as '$bx7SL$useRef').
01:49:23.262	▲
01:49:23.262	▲ Import trace for requested module:
01:49:23.262	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.262	▲ ./node_modules/@react-aria/visually-hidden/dist/import.mjs
01:49:23.262	▲ ./node_modules/@nextui-org/react/dist/index.mjs
01:49:23.263	▲ ./app/layout.tsx
01:49:23.263	▲ ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&page=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pagePath=private-next-app-dir%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage.tsx&appDir=%2Fopt%2Fbuildhome%2Frepo%2Fapp&appPaths=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/tournament/[sport]/[id]/page.tsx?next_edge_ssr_entry
01:49:23.263	▲
01:49:23.263	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.263	▲ Attempted import error: 'useEffect' is not exported from 'react' (imported as '$bx7SL$useEffect').
01:49:23.264	▲
01:49:23.264	▲ Import trace for requested module:
01:49:23.264	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.264	▲ ./node_modules/@react-aria/visually-hidden/dist/import.mjs
01:49:23.264	▲ ./node_modules/@nextui-org/react/dist/index.mjs
01:49:23.264	▲ ./app/layout.tsx
01:49:23.264	▲ ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&page=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pagePath=private-next-app-dir%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage.tsx&appDir=%2Fopt%2Fbuildhome%2Frepo%2Fapp&appPaths=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/tournament/[sport]/[id]/page.tsx?next_edge_ssr_entry
01:49:23.264	▲
01:49:23.265	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.265	▲ Attempted import error: 'useRef' is not exported from 'react' (imported as '$bx7SL$useRef').
01:49:23.265	▲
01:49:23.265	▲ Import trace for requested module:
01:49:23.265	▲ ./node_modules/@react-aria/interactions/dist/import.mjs
01:49:23.265	▲ ./node_modules/@react-aria/visually-hidden/dist/import.mjs
01:49:23.265	▲ ./node_modules/@nextui-org/react/dist/index.mjs
01:49:23.265	▲ ./app/layout.tsx
01:49:23.265	▲ ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&page=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pagePath=private-next-app-dir%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage.tsx&appDir=%2Fopt%2Fbuildhome%2Frepo%2Fapp&appPaths=%2Ftournament%2F%5Bsport%5D%2F%5Bid%5D%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/tournament/[sport]/[id]/page.tsx?next_edge_ssr_entry
01:49:23.265	▲
01:49:23.265	▲
01:49:23.266	▲ > Build failed because of webpack errors
01:49:23.325	▲ error Command failed with exit code 1.
01:49:23.326	▲ info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
01:49:23.342	▲ Error: Command "yarn run build" exited with 1
01:49:23.423
01:49:23.424	⚡️ The Vercel build (npx vercel build) command failed. For more details see the Vercel logs above.
01:49:23.424	⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.
01:49:23.424
01:49:23.449	Failed: Error while executing user command. Exited with error code: 1
01:49:23.458	Failed: build command exited with code: 1
01:49:24.844	Failed: error occurred while running build command

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. using NextUIProvider component in Layout.ts
2. yarn build

Expected behavior

It shoud build compleate

Screenshots or Videos

No response

Operating System Version

Linux, Cloudflare Worker

Browser

Chrome

[linear]

ENG-851 [BUG] - Error Edge Runtime Build

[wingkwong]

1. Can you share your project repo?
2. Are you able to build locally?

[vcctm]

same issue here

▲  ../../node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&page=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2FUsers%2Fvictor%2Froot%2Fvcctm%2Fzowe%2Fapps%2Fbye%2Fapp&appPaths=%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/page.tsx?__next_edge_ssr_entry__
▲
▲  ../../node_modules/@react-aria/interactions/dist/PressResponder.mjs
▲  Attempted import error: 'useContext' is not exported from 'react' (imported as '$87RPk$useContext').
▲
▲  Import trace for requested module:
▲  ../../node_modules/@react-aria/interactions/dist/PressResponder.mjs
▲  ../../node_modules/@react-aria/interactions/dist/import.mjs
▲  ../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.mjs
▲  ../../node_modules/@react-aria/visually-hidden/dist/import.mjs
▲  ../../node_modules/@nextui-org/react/dist/index.mjs
▲  ./app/providers.tsx
▲  ./app/layout.tsx
▲  ../../node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&page=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2FUsers%2Fvictor%2Froot%2Fvcctm%2Fzowe%2Fapps%2Fbye%2Fapp&appPaths=%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/page.tsx?__next_edge_ssr_entry__
▲
▲  ../../node_modules/@react-aria/interactions/dist/PressResponder.mjs
▲  Attempted import error: 'useEffect' is not exported from 'react' (imported as '$87RPk$useEffect').
▲
▲  Import trace for requested module:
▲  ../../node_modules/@react-aria/interactions/dist/PressResponder.mjs
▲  ../../node_modules/@react-aria/interactions/dist/import.mjs
▲  ../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.mjs
▲  ../../node_modules/@react-aria/visually-hidden/dist/import.mjs
▲  ../../node_modules/@nextui-org/react/dist/index.mjs
▲  ./app/providers.tsx
▲  ./app/layout.tsx
▲  ../../node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&page=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2FUsers%2Fvictor%2Froot%2Fvcctm%2Fzowe%2Fapps%2Fbye%2Fapp&appPaths=%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/page.tsx?__next_edge_ssr_entry__
▲
▲  ../../node_modules/@react-aria/interactions/dist/useFocusVisible.mjs
▲  Attempted import error: 'useState' is not exported from 'react' (imported as '$28AnR$useState').
▲
▲  Import trace for requested module:
▲  ../../node_modules/@react-aria/interactions/dist/useFocusVisible.mjs
▲  ../../node_modules/@react-aria/interactions/dist/import.mjs
▲  ../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.mjs
▲  ../../node_modules/@react-aria/visually-hidden/dist/import.mjs
▲  ../../node_modules/@nextui-org/react/dist/index.mjs
▲  ./app/providers.tsx
▲  ./app/layout.tsx
▲  ../../node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&page=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2FUsers%2Fvictor%2Froot%2Fvcctm%2Fzowe%2Fapps%2Fbye%2Fapp&appPaths=%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/page.tsx?__next_edge_ssr_entry__
▲
▲  ../../node_modules/@react-aria/interactions/dist/useFocusVisible.mjs
▲  Attempted import error: 'useEffect' is not exported from 'react' (imported as '$28AnR$useEffect').
▲
▲  Import trace for requested module:
▲  ../../node_modules/@react-aria/interactions/dist/useFocusVisible.mjs
▲  ../../node_modules/@react-aria/interactions/dist/import.mjs
▲  ../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.mjs
▲  ../../node_modules/@react-aria/visually-hidden/dist/import.mjs
▲  ../../node_modules/@nextui-org/react/dist/index.mjs
▲  ./app/providers.tsx
▲  ./app/layout.tsx
▲  ../../node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&page=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2FUsers%2Fvictor%2Froot%2Fvcctm%2Fzowe%2Fapps%2Fbye%2Fapp&appPaths=%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/page.tsx?__next_edge_ssr_entry__
▲
▲  > Build failed because of webpack errors
▲  error: script "build" exited with code 1
▲  Error: Command "bun run build" exited with 1

⚡️ The Vercel build (`bunx vercel build`) command failed. For more details see the Vercel logs above.
⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.

error: script "pages:build" exited with code 1

[wingkwong]

please share the minimal reproducible example.