Nextjs Edge Runtime Flag Bundler Error
Answered
Giant Angora posted this in #help-forum
Giant AngoraOP
Hi guys, i'm facing a really weird error when using Edge Runtime on Nextjs.
The problem is that i'm testing Cloudflare Pages, so i need to make every route static or dynamic edge. When i set a route to edge runtime, using
it give me the following error:
it seems that it can't import floating ui correctly, but i don't even using it.
Floating UI is a dependency of a design-system package that we have, but i haven't use the component that use that library at all.
Any idea how to fix this?
The problem is that i'm testing Cloudflare Pages, so i need to make every route static or dynamic edge. When i set a route to edge runtime, using
export const runtime = "edge";it give me the following error:
`
./node_modules/.pnpm/@floating-ui+react-dom@2.0.8_react-dom@18.2.0_react@18.2.0/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'useLayoutEffect').it seems that it can't import floating ui correctly, but i don't even using it.
Floating UI is a dependency of a design-system package that we have, but i haven't use the component that use that library at all.
Any idea how to fix this?
Answered by Giant Angora
I've been thinking and maybe is because our Design System is not implemented right and is exporting all Components to the client even if we're not using it. So i will try that and close this issue.
5 Replies
a client component cant have an export
remove that, put it in the server component calling it
@Giant Angora
Giant AngoraOP
@Arinji Thanks for the response. But sadly i'm doing that. We're in a migration, I'm testing deploying to Cloudflare and i'm testing only one page for now.
The Page is a Async Server Component where i put my data fetching, and ofc i have some client components down on the tree that use some Custom Components from out Design System. But that's where the problem start, our DS use Floating UI for some of our Components, but currently in that specific Page i'm not using none of those Custom Components that use Floating UI.
Even if a try to render a blank page it keep showing the same error. This keep us away from using Edge Runtime for now.
The page works perfectly if i remove the "edge" runtime export.
The Page is a Async Server Component where i put my data fetching, and ofc i have some client components down on the tree that use some Custom Components from out Design System. But that's where the problem start, our DS use Floating UI for some of our Components, but currently in that specific Page i'm not using none of those Custom Components that use Floating UI.
Even if a try to render a blank page it keep showing the same error. This keep us away from using Edge Runtime for now.
The page works perfectly if i remove the "edge" runtime export.
Giant AngoraOP
I've been thinking and maybe is because our Design System is not implemented right and is exporting all Components to the client even if we're not using it. So i will try that and close this issue.
Answer