firebase · leoortizz · Jul 20, 2023 · Jul 20, 2023 · Jul 20, 2023 · Jul 20, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1 @@
+- Fixed `glob` usage in Next.js utility function to detect images in `app` directory (#6166)
diff --git a/scripts/webframeworks-deploy-tests/nextjs/app/app/image/page.tsx b/scripts/webframeworks-deploy-tests/nextjs/app/app/image/page.tsx
@@ -0,0 +1,10 @@
+import Image from 'next/image'
+
+export default function PageWithImage() {
+  return <Image 
+      src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif"
+      alt=""
+      width={300} 
+      height={300}
+    />;
+}
diff --git a/scripts/webframeworks-deploy-tests/nextjs/next.config.js b/scripts/webframeworks-deploy-tests/nextjs/next.config.js
@@ -10,6 +10,9 @@ const nextConfig = {
     locales: ['en', 'fr'],
     defaultLocale: 'en',
   },
+  images: {
+    domains: ['google.com'],
+  },
   rewrites: () => [{
     source: '/about',
     destination: '/',

diff --git a/scripts/webframeworks-deploy-tests/tests.ts b/scripts/webframeworks-deploy-tests/tests.ts
@@ -233,6 +233,12 @@ describe("webframeworks", function (this) {
         expect(apiDynamicResponse.headers.get("cache-control")).to.eql("private");
         expect(await apiDynamicResponse.json()).to.eql([1, 2, 3]);
       });
+
+      it("should have working image", async () => {
+        const response = await fetch(`${NEXTJS_HOST}/app/image`);
+        expect(response.ok).to.be.true;
+        expect(await response.text()).to.include("<body><img");
+      });
     });
 
     describe("pages directory", () => {

diff --git a/src/frameworks/next/utils.ts b/src/frameworks/next/utils.ts
@@ -2,7 +2,7 @@ import { existsSync } from "fs";
 import { pathExists } from "fs-extra";
 import { basename, extname, join, posix } from "path";
 import { readFile } from "fs/promises";
-import { Glob } from "glob";
+import { sync as globSync } from "glob";
 import type { PagesManifest } from "next/dist/build/webpack/plugins/pages-manifest-plugin";
 import { coerce } from "semver";
 
@@ -245,11 +245,11 @@ export async function isUsingNextImageInAppDirectory(
   projectDir: string,
   nextDir: string
 ): Promise<boolean> {
-  const { found: files } = new Glob(
+  const files = globSync(
     join(projectDir, nextDir, "server", "**", "*client-reference-manifest.js")
   );
 
-  for await (const filepath of files) {
+  for (const filepath of files) {
     const fileContents = await readFile(filepath);
 
     // Return true when the first file containing the next/image component is found

diff --git a/src/test/frameworks/next/utils.spec.ts b/src/test/frameworks/next/utils.spec.ts
@@ -282,8 +282,8 @@ describe("Next.js utils", () => {
 
       it("should return true when using next/image in the app directory", async () => {
         sandbox
-          .stub(glob, "Glob")
-          .returns({ found: ["/path-to-app/.next/server/app/page_client-reference-manifest.js"] });
+          .stub(glob, "sync")
+          .returns(["/path-to-app/.next/server/app/page_client-reference-manifest.js"]);
         sandbox.stub(fsPromises, "readFile").resolves(pageClientReferenceManifestWithImage);
 
         expect(await isUsingNextImageInAppDirectory("", "")).to.be.true;
@@ -292,13 +292,13 @@ describe("Next.js utils", () => {
       it("should return false when not using next/image in the app directory", async () => {
         sandbox.stub(fsPromises, "readFile").resolves(pageClientReferenceManifestWithoutImage);
         const globStub = sandbox
-          .stub(glob, "Glob")
-          .returns({ found: ["/path-to-app/.next/server/app/page_client-reference-manifest.js"] });
+          .stub(glob, "sync")
+          .returns(["/path-to-app/.next/server/app/page_client-reference-manifest.js"]);
 
         expect(await isUsingNextImageInAppDirectory("", "")).to.be.false;
 
         globStub.restore();
-        sandbox.stub(glob, "Glob").returns({ found: [] });
+        sandbox.stub(glob, "sync").returns([]);
 
         expect(await isUsingNextImageInAppDirectory("", "")).to.be.false;
       });
@@ -312,15 +312,15 @@ describe("Next.js utils", () => {
       it("should return true when using next/image in the app directory", async () => {
         sandbox.stub(fsPromises, "readFile").resolves(clientReferenceManifestWithImage);
         sandbox
-          .stub(glob, "Glob")
-          .returns({ found: ["/path-to-app/.next/server/client-reference-manifest.js"] });
+          .stub(glob, "sync")
+          .returns(["/path-to-app/.next/server/client-reference-manifest.js"]);
 
         expect(await isUsingNextImageInAppDirectory("", "")).to.be.true;
       });
 
       it("should return false when not using next/image in the app directory", async () => {
         sandbox.stub(fsPromises, "readFile").resolves(clientReferenceManifestWithoutImage);
-        sandbox.stub(glob, "Glob").returns({ found: [] });
+        sandbox.stub(glob, "sync").returns([]);
 
         expect(await isUsingNextImageInAppDirectory("", "")).to.be.false;
       });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Fixed `glob` usage in Next.js utility function to detect images in `app` directory (#6166)