[NEXT-862] Can Vercel Edge Config be used in experimental-edge server components?

hrougier commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: 7.1.0
Relevant packages:
  next: 13.2.5-canary.8
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/recursing-leaf-ei4qfd

To Reproduce

import '@vercel/edge-config' inside a server component page
export const runtime = 'experimental-edge' from that page
npm run build

Describe the Bug

The node export of @vercel/edge-config is used at build time making the build fail with the following error

Failed to compile.

./node_modules/@vercel/edge-config/dist/index.node.js:1:89
Module not found: Can't resolve 'fs/promises'

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

Import trace for requested module:
./app/page.tsx
./node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?absolute500Path=&absoluteAppPath=next%2Fdist%2Fpages%2F_app&absoluteDocumentPath=next%2Fdist%2Fpages%2F_document&absoluteErrorPath=next%2Fdist%2Fpages%2F_error&absolutePagePath=private-next-app-dir%2Fpage.tsx&buildId=NfJUmH-fOomC-2165Jgvq&dev=false&isServerComponent=true&page=%2Fpage&stringifiedConfig=%7B%22env%22%3A%7B%7D%2C%22webpack%22%3Anull%2C%22eslint%22%3A%7B%22ignoreDuringBuilds%22%3Afalse%7D%2C%22typescript%22%3A%7B%22ignoreBuildErrors%22%3Afalse%2C%22tsconfigPath%22%3A%22tsconfig.json%22%7D%2C%22distDir%22%3A%22.next%22%2C%22cleanDistDir%22%3Atrue%2C%22assetPrefix%22%3A%22%22%2C%22configOrigin%22%3A%22next.config.js%22%2C%22useFileSystemPublicRoutes%22%3Atrue%2C%22generateEtags%22%3Atrue%2C%22pageExtensions%22%3A%5B%22tsx%22%2C%22ts%22%2C%22jsx%22%2C%22js%22%5D%2C%22target%22%3A%22server%22%2C%22poweredByHeader%22%3Atrue%2C%22compress%22%3Atrue%2C%22analyticsId%22%3A%22%22%2C%22images%22%3A%7B%22deviceSizes%22%3A%5B640%2C750%2C828%2C1080%2C1200%2C1920%2C2048%2C3840%5D%2C%22imageSizes%22%3A%5B16%2C32%2C48%2C64%2C96%2C128%2C256%2C384%5D%2C%22path%22%3A%22%2F_next%2Fimage%22%2C%22loader%22%3A%22default%22%2C%22loaderFile%22%3A%22%22%2C%22domains%22%3A%5B%5D%2C%22disableStaticImages%22%3Afalse%2C%22minimumCacheTTL%22%3A60%2C%22formats%22%3A%5B%22image%2Fwebp%22%5D%2C%22dangerouslyAllowSVG%22%3Afalse%2C%22contentSecurityPolicy%22%3A%22script-src%20'none'%3B%20frame-src%20'none'%3B%20sandbox%3B%22%2C%22contentDispositionType%22%3A%22inline%22%2C%22remotePatterns%22%3A%5B%5D%2C%22unoptimized%22%3Afalse%7D%2C%22devIndicators%22%3A%7B%22buildActivity%22%3Atrue%2C%22buildActivityPosition%22%3A%22bottom-right%22%7D%2C%22onDemandEntries%22%3A%7B%22maxInactiveAge%22%3A15000%2C%22pagesBufferLength%22%3A2%7D%2C%22amp%22%3A%7B%22canonicalBase%22%3A%22%22%7D%2C%22basePath%22%3A%22%22%2C%22sassOptions%22%3A%7B%7D%2C%22trailingSlash%22%3Afalse%2C%22i18n%22%3Anull%2C%22productionBrowserSourceMaps%22%3Afalse%2C%22optimizeFonts%22%3Atrue%2C%22excludeDefaultMomentLocales%22%3Atrue%2C%22serverRuntimeConfig%22%3A%7B%7D%2C%22publicRuntimeConfig%22%3A%7B%7D%2C%22reactStrictMode%22%3Atrue%2C%22httpAgentOptions%22%3A%7B%22keepAlive%22%3Atrue%7D%2C%22outputFileTracing%22%3Atrue%2C%22staticPageGenerationTimeout%22%3A60%2C%22swcMinify%22%3Atrue%2C%22experimental%22%3A%7B%22clientRouterFilter%22%3Atrue%2C%22clientRouterFilterRedirects%22%3Afalse%2C%22preCompiledNextServer%22%3Afalse%2C%22fetchCacheKeyPrefix%22%3A%22%22%2C%22middlewarePrefetch%22%3A%22flexible%22%2C%22optimisticClientCache%22%3Atrue%2C%22manualClientBasePath%22%3Afalse%2C%22legacyBrowsers%22%3Afalse%2C%22newNextLinkBehavior%22%3Atrue%2C%22cpus%22%3A1%2C%22sharedPool%22%3Atrue%2C%22isrFlushToDisk%22%3Atrue%2C%22workerThreads%22%3Afalse%2C%22pageEnv%22%3Afalse%2C%22optimizeCss%22%3Afalse%2C%22nextScriptWorkers%22%3Afalse%2C%22scrollRestoration%22%3Afalse%2C%22externalDir%22%3Afalse%2C%22disableOptimizedLoading%22%3Afalse%2C%22gzipSize%22%3Atrue%2C%22swcFileReading%22%3Atrue%2C%22craCompat%22%3Afalse%2C%22esmExternals%22%3Atrue%2C%22appDir%22%3Atrue%2C%22isrMemoryCacheSize%22%3A52428800%2C%22fullySpecified%22%3Afalse%2C%22outputFileTracingRoot%22%3A%22%2Fproject%2Fhome%2Ftoweliey%2Fworkspace%22%2C%22swcTraceProfiling%22%3Afalse%2C%22forceSwcTransforms%22%3Afalse%2C%22largePageDataBytes%22%3A128000%2C%22enableUndici%22%3Atrue%2C%22adjustFontFallbacks%22%3Afalse%2C%22adjustFontFallbacksWithSizeAdjust%22%3Afalse%2C%22typedRoutes%22%3Afalse%2C%22instrumentationHook%22%3Afalse%7D%2C%22configFile%22%3A%22%2Fproject%2Fhome%2Ftoweliey%2Fworkspace%2Fnext.config.js%22%2C%22configFileName%22%3A%22next.config.js%22%7D&pagesType=app&appDirLoader=bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGcGFnZSZwYWdlUGF0aD1wcml2YXRlLW5leHQtYXBwLWRpciUyRnBhZ2UudHN4JmFwcERpcj0lMkZwcm9qZWN0JTJGaG9tZSUyRnRvd2VsaWV5JTJGd29ya3NwYWNlJTJGYXBwJmFwcFBhdGhzPSUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZhc3NldFByZWZpeD0h&sriEnabled=false&incrementalCacheHandlerPath=!

> Build failed because of webpack errors

Expected Behavior

Import and use @vercel/edge-config in edge runtime server components even if the primary use case of @vercel/edge-config is to be used in middleware.ts (which works as expected).

This also happens in app route handlers using runtime = 'experimental-edge', whereas it works in API routes with a runtime: 'edge' config.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

_NEXT-862

dferber90 commented 1 year ago

Thanks for this super detailed report!

The @vercel/edge-config package uses conditional exports: one for node and one for edge. Seems like there was a regression in Next.js which causes the node export to be used inside of the edge runtime. We're looking into it.

As a workaround in the meantime, you could either

downgrade @vercel/edge-config to version 0.1.1
or downgrade Next.js to version 13.1.6

dferber90 commented 1 year ago

This is now fixed in @vercel/edge-config v0.1.5. We are also working on fixing the regression in Next.js itself.

The underlying issue was that if a package uses conditional exports for "node" and "default" then edge-light runtime code would match "node" instead of "default". Explicitly adding an entry for edge-light serves as a workaround until the regression is fixed in Next.js itself.

hrougier commented 1 year ago

Thank you for all the explanations and the quick feedback! Appreciate it!

vercel / next.js