From e7334d2ea99895bd1bada1f3720c118b8069a763 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 18 Jan 2024 12:54:40 +0100
Subject: [PATCH] Support next/og usage in ESM nextjs app

---
 packages/next/src/build/handle-externals.ts   |  2 +-
 .../app-dir/app-esm-js/app/opengraph-image.js | 23 +++++++++++++++++++
 test/e2e/app-dir/app-esm-js/index.test.ts     |  6 +++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 test/e2e/app-dir/app-esm-js/app/opengraph-image.js

diff --git a/packages/next/src/build/handle-externals.ts b/packages/next/src/build/handle-externals.ts
index 72918600043eb..a37f84ad33fbe 100644
--- a/packages/next/src/build/handle-externals.ts
+++ b/packages/next/src/build/handle-externals.ts
@@ -328,7 +328,7 @@ export function makeExternalHandler({
 
     // ESM externals can only be imported (and not required).
     // Make an exception in loose mode.
-    if (!isEsmRequested && isEsm && !looseEsmExternals) {
+    if (!isEsmRequested && isEsm && !looseEsmExternals && !isLocal) {
       throw new Error(
         `ESM packages (${request}) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals`
       )
diff --git a/test/e2e/app-dir/app-esm-js/app/opengraph-image.js b/test/e2e/app-dir/app-esm-js/app/opengraph-image.js
new file mode 100644
index 0000000000000..c139c1aac0d0a
--- /dev/null
+++ b/test/e2e/app-dir/app-esm-js/app/opengraph-image.js
@@ -0,0 +1,23 @@
+import { ImageResponse } from 'next/og'
+
+export default function OpenGraphImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: 1200,
+          height: 630,
+          backgroundColor: '#000',
+          color: '#fff',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          fontFamily: 'sans-serif',
+        }}
+      >
+        OG
+      </div>
+    )
+  )
+}
diff --git a/test/e2e/app-dir/app-esm-js/index.test.ts b/test/e2e/app-dir/app-esm-js/index.test.ts
index c280c844225cb..4296a4f350434 100644
--- a/test/e2e/app-dir/app-esm-js/index.test.ts
+++ b/test/e2e/app-dir/app-esm-js/index.test.ts
@@ -35,5 +35,11 @@ createNextDescribe(
       )
       expect(await $('.root').text()).toContain('pages')
     })
+
+    it('should support next/og image', async () => {
+      const res = await next.fetch('/opengraph-image')
+      expect(res.status).toBe(200)
+      expect(res.headers.get('content-type')).toBe('image/png')
+    })
   }
 )