Support next/og usage in ESM nextjs app

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`
       )

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>
+    )
+  )
+}

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')
+    })
   }
 )