support next build --webpack flag

CHANGELOG.md

@@ -1 +1,2 @@
+- Add support for the --webpack flag in Next.js build (#9761)
 - Fix the bug when Data Connect emulator hangs with PGlite. (Issue #9756) #9771

src/frameworks/angular/index.ts

@@ -17,6 +17,7 @@
   getNodeModuleBin,
   warnIfCustomBuildScript,
   findDependency,
+  getBuildScript,
 } from "../utils";
 import {
   getAllTargets,
@@ -38,19 +39,19 @@
 
 export const supportedRange = "16 - 20";
 
 export async function discover(dir: string): Promise<Discovery | undefined> {
   if (!(await pathExists(join(dir, "package.json")))) return;
   if (!(await pathExists(join(dir, "angular.json")))) return;
   const version = getAngularVersion(dir);
   return { mayWantBackend: true, version };
 }
 
 export function init(setup: any, config: any) {
   execSync(
     `npx --yes -p @angular/cli@"${supportedRange}" ng new ${setup.projectId} --directory ${setup.featureInfo.hosting.source} --skip-git`,
     {
       stdio: "inherit",
       cwd: config.projectDir,
     },
   );
   return Promise.resolve();
@@ -64,7 +65,10 @@
     baseHref: baseUrl,
     ssr,
   } = await getBuildConfig(dir, configuration);
-  await warnIfCustomBuildScript(dir, name, DEFAULT_BUILD_SCRIPT);
+  const buildScript = await getBuildScript(join(dir, "package.json"));
+  if (buildScript) {
+    warnIfCustomBuildScript(buildScript, name, DEFAULT_BUILD_SCRIPT);
+  }
   for (const target of targets) {
     // TODO there is a bug here. Spawn for now.
     // await scheduleTarget(prerenderTarget);

src/frameworks/astro/index.ts

@@ -3,7 +3,13 @@ import { copy, existsSync } from "fs-extra";
 import { join } from "path";
 import { BuildResult, Discovery, FrameworkType, SupportLevel } from "../interfaces";
 import { FirebaseError } from "../../error";
-import { readJSON, simpleProxy, warnIfCustomBuildScript, getNodeModuleBin } from "../utils";
+import {
+  readJSON,
+  simpleProxy,
+  warnIfCustomBuildScript,
+  getNodeModuleBin,
+  getBuildScript,
+} from "../utils";
 import { getAstroVersion, getBootstrapScript, getConfig } from "./utils";
 
 export const name = "Astro";
@@ -26,7 +32,10 @@ const DEFAULT_BUILD_SCRIPT = ["astro build"];
 
 export async function build(cwd: string): Promise<BuildResult> {
   const cli = getNodeModuleBin("astro", cwd);
-  await warnIfCustomBuildScript(cwd, name, DEFAULT_BUILD_SCRIPT);
+  const buildScript = await getBuildScript(join(cwd, "package.json"));
+  if (buildScript) {
+    warnIfCustomBuildScript(buildScript, name, DEFAULT_BUILD_SCRIPT);
+  }
   const { output, adapter } = await getConfig(cwd);
   const wantsBackend = output !== "static";
   if (wantsBackend && adapter?.name !== "@astrojs/node") {

src/frameworks/next/index.ts

@@ -28,6 +28,7 @@ import {
   findDependency,
   validateLocales,
   getNodeModuleBin,
+  getBuildScript,
 } from "../utils";
 import {
   BuildResult,
@@ -87,7 +88,7 @@ import { getAllSiteDomains, getDeploymentDomain } from "../../hosting/api";
 import { logger } from "../../logger";
 import { parseStrict } from "../../functions/env";
 
-const DEFAULT_BUILD_SCRIPT = ["next build"];
+const DEFAULT_BUILD_SCRIPT = ["next build", "next build --webpack"];
 const PUBLIC_DIR = "public";
 
 export const supportedRange = "12 - 15.0";
@@ -119,10 +120,13 @@ export async function discover(dir: string) {
  */
 export async function build(
   dir: string,
-  target: string,
+  _target: string,
   context?: FrameworkContext,
 ): Promise<BuildResult> {
-  await warnIfCustomBuildScript(dir, name, DEFAULT_BUILD_SCRIPT);
+  const buildScript = await getBuildScript(join(dir, "package.json"));
+  if (buildScript) {
+    warnIfCustomBuildScript(buildScript, name, DEFAULT_BUILD_SCRIPT);
+  }
 
   const reactVersion = getReactVersion(dir);
   if (reactVersion && gte(reactVersion, "18.0.0")) {
@@ -162,7 +166,11 @@ export async function build(
   const cli = getNodeModuleBin("next", dir);
 
   const nextBuild = new Promise((resolve, reject) => {
-    const buildProcess = spawn(cli, ["build"], { cwd: dir, env });
+    const buildProcess = spawn(
+      cli,
+      ["build", ...(buildScript?.includes("--webpack") ? ["--webpack"] : [])],
+      { cwd: dir, env },
+    );
     buildProcess.stdout?.on("data", (data) => logger.info(data.toString()));
     buildProcess.stderr?.on("data", (data) => logger.info(data.toString()));
     buildProcess.on("error", (err) => {

src/frameworks/nuxt/index.ts

@@ -4,7 +4,13 @@ import { join, posix } from "path";
 import { lt } from "semver";
 import { spawn, sync as spawnSync } from "cross-spawn";
 import { FrameworkType, SupportLevel } from "../interfaces";
-import { simpleProxy, warnIfCustomBuildScript, getNodeModuleBin, relativeRequire } from "../utils";
+import {
+  simpleProxy,
+  warnIfCustomBuildScript,
+  getNodeModuleBin,
+  relativeRequire,
+  getBuildScript,
+} from "../utils";
 import { getNuxtVersion } from "./utils";
 
 export const name = "Nuxt";
@@ -39,7 +45,10 @@ export async function discover(dir: string) {
 }
 
 export async function build(cwd: string) {
-  await warnIfCustomBuildScript(cwd, name, DEFAULT_BUILD_SCRIPT);
+  const buildScript = await getBuildScript(join(cwd, "package.json"));
+  if (buildScript) {
+    warnIfCustomBuildScript(buildScript, name, DEFAULT_BUILD_SCRIPT);
+  }
   const cli = getNodeModuleBin("nuxt", cwd);
   const {
     ssr: wantsBackend,

src/frameworks/utils.spec.ts

@@ -1,9 +1,15 @@
 import { expect } from "chai";
-import * as sinon from "sinon";
 import * as fs from "fs";
-import { resolve, join } from "path";
+import { join, resolve } from "path";
+import * as sinon from "sinon";
 
-import { warnIfCustomBuildScript, isUrl, getNodeModuleBin, conjoinOptions } from "./utils";
+import {
+  conjoinOptions,
+  getBuildScript,
+  getNodeModuleBin,
+  isUrl,
+  warnIfCustomBuildScript,
+} from "./utils";
 
 describe("Frameworks utils", () => {
   describe("getNodeModuleBin", () => {
@@ -65,26 +71,22 @@ describe("Frameworks utils", () => {
       sandbox.restore();
     });
 
-    it("should not print warning when a default build script is found.", async () => {
+    it("should not print warning when a default build script is found.", () => {
       const buildScript = "next build";
       const defaultBuildScripts = ["next build"];
       packageJson.scripts.build = buildScript;
 
-      sandbox.stub(fs.promises, "readFile").resolves(JSON.stringify(packageJson));
-
-      await warnIfCustomBuildScript("fakedir/", framework, defaultBuildScripts);
+      warnIfCustomBuildScript(buildScript, framework, defaultBuildScripts);
 
       expect(consoleLogSpy.callCount).to.equal(0);
     });
 
-    it("should print warning when a custom build script is found.", async () => {
+    it("should print warning when a custom build script is found.", () => {
       const buildScript = "echo 'Custom build script' && next build";
       const defaultBuildScripts = ["next build"];
       packageJson.scripts.build = buildScript;
 
-      sandbox.stub(fs.promises, "readFile").resolves(JSON.stringify(packageJson));
-
-      await warnIfCustomBuildScript("fakedir/", framework, defaultBuildScripts);
+      warnIfCustomBuildScript(buildScript, framework, defaultBuildScripts);
 
       expect(consoleLogSpy).to.be.calledOnceWith(
         `\nWARNING: Your package.json contains a custom build that is being ignored. Only the ${framework} default build script (e.g, "${defaultBuildScripts[0]}") is respected. If you have a more advanced build process you should build a custom integration https://firebase.google.com/docs/hosting/express\n`,
@@ -135,4 +137,51 @@ describe("Frameworks utils", () => {
       );
     });
   });
+
+  describe("getBuildScript", () => {
+    let sandbox: sinon.SinonSandbox;
+    const packageJson: Record<string, Record<string, string>> = {
+      scripts: {
+        build: "",
+      },
+    };
+
+    beforeEach(() => {
+      sandbox = sinon.createSandbox();
+    });
+
+    afterEach(() => {
+      sandbox.restore();
+      packageJson.scripts.build = "";
+    });
+
+    it("should return the build script from package.json", async () => {
+      packageJson.scripts.build = "test build script";
+
+      sandbox
+        .stub(fs.promises, "readFile")
+        .withArgs("dir/package.json")
+        .resolves(JSON.stringify(packageJson));
+
+      const buildScript = await getBuildScript("dir/package.json");
+      expect(buildScript).to.equal("test build script");
+    });
+
+    it("should return undefined if no build script exists", async () => {
+      delete packageJson.scripts.build;
+
+      sandbox
+        .stub(fs.promises, "readFile")
+        .withArgs("dir/package.json")
+        .resolves(JSON.stringify(packageJson));
+      const buildScript = await getBuildScript("dir/package.json");
+      expect(buildScript).to.be.undefined;
+    });
+
+    it("should return undefined if package.json is not found", async () => {
+      sandbox.stub(fs.promises, "readFile").withArgs("dir/package.json").rejects(new Error());
+      const buildScript = await getBuildScript("dir/package.json");
+      expect(buildScript).to.be.undefined;
+    });
+  });
 });

src/frameworks/utils.ts

@@ -51,22 +51,34 @@ export function readJSON<JsonType = any>(
  * Prints a warning if the build script in package.json
  * contains anything other than allowedBuildScripts.
  */
-export async function warnIfCustomBuildScript(
-  dir: string,
+export function warnIfCustomBuildScript(
+  buildScript: string,
   framework: string,
   defaultBuildScripts: string[],
-): Promise<void> {
-  const packageJsonBuffer = await readFile(join(dir, "package.json"));
-  const packageJson = JSON.parse(packageJsonBuffer.toString());
-  const buildScript = packageJson.scripts?.build;
-
-  if (buildScript && !defaultBuildScripts.includes(buildScript)) {
+): void {
+  if (!defaultBuildScripts.includes(buildScript)) {
     console.warn(
       `\nWARNING: Your package.json contains a custom build that is being ignored. Only the ${framework} default build script (e.g, "${defaultBuildScripts[0]}") is respected. If you have a more advanced build process you should build a custom integration https://firebase.google.com/docs/hosting/express\n`,
     );
   }
 }
 
+/**
+ * Get the build script from package.json.
+ *
+ * @param packageJsonPath - The path to the package.json file.
+ * @returns The build script from package.json, or undefined if the build script or package.json is not found.
+ */
+export async function getBuildScript(packageJsonPath: string): Promise<string | undefined> {
+  try {
+    const packageJsonBuffer = await readFile(packageJsonPath);
+    const packageJson = JSON.parse(packageJsonBuffer.toString());
+    return packageJson.scripts?.build;
+  } catch (error) {
+    return undefined;
+  }
+}
+
 /**
  * Proxy a HTTP response
  * It uses the Proxy object to intercept the response and buffer it until the

src/frameworks/vite/index.ts

@@ -12,6 +12,7 @@ import {
   findDependency,
   getNodeModuleBin,
   relativeRequire,
+  getBuildScript,
 } from "../utils";
 
 export const name = "Vite";
@@ -83,7 +84,10 @@ export async function discover(dir: string, plugin?: string, npmDependency?: str
 export async function build(root: string, target: string) {
   const { build } = await relativeRequire(root, "vite");
 
-  await warnIfCustomBuildScript(root, name, DEFAULT_BUILD_SCRIPT);
+  const buildScript = await getBuildScript(join(root, "package.json"));
+  if (buildScript) {
+    warnIfCustomBuildScript(buildScript, name, DEFAULT_BUILD_SCRIPT);
+  }
 
   // SvelteKit uses process.cwd() unfortunately, chdir
   const cwd = process.cwd();