[NEXT-1156] Using an external package that imports next/server incorrectly bundles @vercel/og

[solaldunckel]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Thu Jan  5 20:48:54 PST 2023; root:xnu-8792.81.2~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.15.0
      npm: 9.6.3
      Yarn: 1.22.19
      pnpm: 8.2.0
    Relevant packages:
      next: 13.3.1-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://github.com/solaldunckel/next-13-bundle-size-issue

To Reproduce

1. Create a route handler on the edge
2. Import an external package that uses NextResponse or NextRequest (e.g @clerk/nextjs)
3. Notice that @vercel/og gets bundled in the route handler

Describe the Bug

After updating to Next.js version 13.3, I noticed a significant increase in the size of my edge functions on Vercel. Upon investigation, I found that a new ImageResponse export in next/server is now included by default.

One of the packages I use, @clerk/nextjs, imports NextResponse which causes the @vercel/og package to be bundled into the function.
You can see in those screenshots the bundle size increase when importing the external package @clerk/nextjs

An error message also appears when running next build, which correspond to the size of @vercel/og/index.edge.js

[webpack.cache.PackFileCacheStrategy] Serializing big strings (659kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

The only way I found to fix the issue was to patch the external package to importNextResponse and NextRequest directly from next/dist/server/web/exports/

Expected Behavior

Importing from next/server in an external package shouldn't cause @vercel/og to be bundled.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1156

[av-erencelik]

Hey, I am experiencing the same problem too. I can't deploy to vercel because edge function size is bigger than 1mb and getting the same errors like you. Did you find any workarounds or solutions for this?

[solaldunckel]

@av-erencelik The only workaround I found is patching @clerk/nextjs to modify all imports from next/server to the corresponding export. It's actually what Next.js is doing during compilation (sadly not on external packages).

next.js/packages/next-swc/crates/core/src/lib.rs

Lines 162 to 169 in 8050a6c

	modularize_imports_config.packages.insert(
	"next/server".to_string(),
	turbo_binding::swc::custom_transform::modularize_imports::PackageConfig {
	transform: "next/dist/server/web/exports/{{ kebabCase member }}".to_string(),
	prevent_full_import: false,
	skip_default_conversion: false,
	},
	);

One example of the patch for the withClerkMiddleware.js file :

--- a/dist/server/withClerkMiddleware.js
+++ b/dist/server/withClerkMiddleware.js
@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleMiddlewareResult = exports.withClerkMiddleware = exports.decorateResponseWithObservabilityHeaders = void 0;
 const backend_1 = require("@clerk/backend");
-const server_1 = require("next/server");
+const NextResponse = require("next/dist/server/web/exports/next-response").default;
 const constants_1 = require("../constants");
 const clerk_1 = require("./clerk");
 const errors_1 = require("./errors");
@@ -93,7 +93,7 @@ exports.withClerkMiddleware = withClerkMiddleware;
 function handleMiddlewareResult({ req, res, authStatus, authMessage, authReason, }) {
     // pass-through case, convert to next()
     if (!res) {
-        res = server_1.NextResponse.next();
+        res = NextResponse.next();
     }
     // redirect() case, return early
     if (res.headers.get(constants_1.constants.Headers.NextRedirect)) {

Be aware that patching packages like this is not really a good practice.

[av-erencelik]

@solaldunckel thanks for very detailed answer. I tried your solution and it works. I posted this issue on Clerk's discord and they suggested to downgrading to earlier version of Next.js until Vercel fix it. They said they were in contact with the next team and reported the problem.

[amannn]

The next-intl middleware is also affected by this: amannn/next-intl#297

[shuding]

This problem should be fixed with the next canary release, thanks for bringing it up!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.