fix: more robust handling of export output (#418)

* chore: rename fixtures

* chore: add custom dist export fixture

* fix: more robust handling of export output

* chore: ignore new dist

* chore: fix error snapshot

Author: ascorbic

.prettierignore

@@ -8,6 +8,7 @@ package.json
 edge-runtime/vendor/
 deno.lock
 tests/fixtures/dist-dir/cool/output
+tests/fixtures/output-export-custom-dist/custom-dist
 .nx
 custom-dist-dir
 pnpm.lock

src/build/content/static.ts

@@ -68,9 +68,12 @@ export const copyStaticAssets = async (ctx: PluginContext): Promise<void> => {
 
 export const copyStaticExport = async (ctx: PluginContext): Promise<void> => {
   await tracer.withActiveSpan('copyStaticExport', async () => {
+    if (!ctx.exportDetail?.outDirectory) {
+      ctx.failBuild('Export directory not found')
+    }
     try {
       await rm(ctx.staticDir, { recursive: true, force: true })
-      await cp(ctx.resolveFromSiteDir('out'), ctx.staticDir, { recursive: true })
+      await cp(ctx.exportDetail.outDirectory, ctx.staticDir, { recursive: true })
     } catch (error) {
       ctx.failBuild('Failed copying static export', error)
     }

src/build/plugin-context.ts

@@ -1,4 +1,4 @@
-import { readFileSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
 // Here we need to actually import `resolve` from node:path as we want to resolve the paths
 // eslint-disable-next-line no-restricted-imports
@@ -32,6 +32,11 @@ export interface RequiredServerFilesManifest {
   ignore: string[]
 }
 
+export interface ExportDetail {
+  success: boolean
+  outDirectory: string
+}
+
 export class PluginContext {
   utils: NetlifyPluginUtils
   netlifyConfig: NetlifyPluginOptions['netlifyConfig']
@@ -200,6 +205,28 @@ export class PluginContext {
     return JSON.parse(await readFile(join(this.publishDir, 'prerender-manifest.json'), 'utf-8'))
   }
 
+  /**
+   * Uses various heuristics to try to find the .next dir.
+   * Works by looking for BUILD_ID, so requires the site to have been built
+   */
+  findDotNext(): string | false {
+    for (const dir of [
+      // The publish directory
+      this.publishDir,
+      // In the root
+      resolve(DEFAULT_PUBLISH_DIR),
+      // The sibling of the publish directory
+      resolve(this.publishDir, '..', DEFAULT_PUBLISH_DIR),
+      // In the package dir
+      resolve(this.constants.PACKAGE_PATH || '', DEFAULT_PUBLISH_DIR),
+    ]) {
+      if (existsSync(join(dir, 'BUILD_ID'))) {
+        return dir
+      }
+    }
+    return false
+  }
+
   /**
    * Get Next.js middleware config from the build output
    */
@@ -215,13 +242,45 @@ export class PluginContext {
   /** Get RequiredServerFiles manifest from build output **/
   get requiredServerFiles(): RequiredServerFilesManifest {
     if (!this._requiredServerFiles) {
+      let requiredServerFilesJson = join(this.publishDir, 'required-server-files.json')
+
+      if (!existsSync(requiredServerFilesJson)) {
+        const dotNext = this.findDotNext()
+        if (dotNext) {
+          requiredServerFilesJson = join(dotNext, 'required-server-files.json')
+        }
+      }
+
       this._requiredServerFiles = JSON.parse(
-        readFileSync(join(this.publishDir, 'required-server-files.json'), 'utf-8'),
+        readFileSync(requiredServerFilesJson, 'utf-8'),
       ) as RequiredServerFilesManifest
     }
     return this._requiredServerFiles
   }
 
+  #exportDetail: ExportDetail | null = null
+
+  /** Get metadata when output = export */
+  get exportDetail(): ExportDetail | null {
+    if (this.buildConfig.output !== 'export') {
+      return null
+    }
+    if (!this.#exportDetail) {
+      const detailFile = join(
+        this.requiredServerFiles.appDir,
+        this.buildConfig.distDir,
+        'export-detail.json',
+      )
+      if (!existsSync(detailFile)) {
+        return null
+      }
+      try {
+        this.#exportDetail = JSON.parse(readFileSync(detailFile, 'utf-8'))
+      } catch {}
+    }
+    return this.#exportDetail
+  }
+
   /** Get Next Config from build output **/
   get buildConfig(): NextConfigComplete {
     return this.requiredServerFiles.config

src/build/verification.ts

@@ -1,4 +1,5 @@
 import { existsSync } from 'node:fs'
+import { join } from 'node:path'
 
 import { satisfies } from 'semver'
 
@@ -10,7 +11,7 @@ const SUPPORTED_NEXT_VERSIONS = '>=13.5.0'
 export function verifyPublishDir(ctx: PluginContext) {
   if (!existsSync(ctx.publishDir)) {
     ctx.failBuild(
-      `Your publish directory was not found at: ${ctx.publishDir}, please check your build settings`,
+      `Your publish directory was not found at: ${ctx.publishDir}. Please check your build settings`,
     )
   }
   // for next.js sites the publish directory should never equal the package path which should be
@@ -22,33 +23,40 @@ export function verifyPublishDir(ctx: PluginContext) {
   //    that directory will be above packagePath
   if (ctx.publishDir === ctx.resolveFromPackagePath('')) {
     ctx.failBuild(
-      `Your publish directory cannot be the same as the base directory of your site, please check your build settings`,
+      `Your publish directory cannot be the same as the base directory of your site. Please check your build settings`,
     )
   }
   try {
-    // `PluginContext.buildConfig` is getter and we only test wether it throws
+    // `PluginContext.buildConfig` is getter and we only test whether it throws
     // and don't actually need to use its value
     // eslint-disable-next-line no-unused-expressions
     ctx.buildConfig
   } catch {
     ctx.failBuild(
-      'Your publish directory does not contain expected Next.js build output, please check your build settings',
+      'Your publish directory does not contain expected Next.js build output. Please check your build settings',
     )
   }
-  if (
-    (ctx.buildConfig.output === 'standalone' || ctx.buildConfig.output === undefined) &&
-    !existsSync(ctx.standaloneRootDir)
-  ) {
-    ctx.failBuild(
-      `Your publish directory does not contain expected Next.js build output, please make sure you are using Next.js version (${SUPPORTED_NEXT_VERSIONS})`,
-    )
+  if (ctx.buildConfig.output === 'standalone' || ctx.buildConfig.output === undefined) {
+    if (!existsSync(join(ctx.publishDir, 'BUILD_ID'))) {
+      ctx.failBuild(
+        'Your publish directory does not contain expected Next.js build output. Please check your build settings',
+      )
+    }
+    if (!existsSync(ctx.standaloneRootDir)) {
+      ctx.failBuild(
+        `Your publish directory does not contain expected Next.js build output. Please make sure you are using Next.js version (${SUPPORTED_NEXT_VERSIONS})`,
+      )
+    }
   }
-  if (ctx.buildConfig.output === 'export' && !existsSync(ctx.resolveFromSiteDir('out'))) {
-    ctx.failBuild(
-      `Your export directory was not found at: ${ctx.resolveFromSiteDir(
-        'out',
-      )}, please check your build settings`,
-    )
+  if (ctx.buildConfig.output === 'export') {
+    if (!ctx.exportDetail?.success) {
+      ctx.failBuild(`Your export failed to build. Please check your build settings`)
+    }
+    if (!existsSync(ctx.exportDetail?.outDirectory)) {
+      ctx.failBuild(
+        `Your export directory was not found at: ${ctx.exportDetail?.outDirectory}. Please check your build settings`,
+      )
+    }
   }
 }
 

tests/e2e/export.test.ts

@@ -0,0 +1,54 @@
+import { expect, type Locator } from '@playwright/test'
+import { nextVersionSatisfies } from '../utils/next-version-helpers.mjs'
+import { test } from '../utils/playwright-helpers.js'
+
+const expectImageWasLoaded = async (locator: Locator) => {
+  expect(await locator.evaluate((img: HTMLImageElement) => img.naturalHeight)).toBeGreaterThan(0)
+}
+test('Renders the Home page correctly with output export', async ({ page, outputExport }) => {
+  const response = await page.goto(outputExport.url)
+  const headers = response?.headers() || {}
+
+  await expect(page).toHaveTitle('Simple Next App')
+
+  expect(headers['cache-status']).toBe('"Netlify Edge"; fwd=miss')
+
+  const h1 = page.locator('h1')
+  await expect(h1).toHaveText('Home')
+
+  await expectImageWasLoaded(page.locator('img'))
+})
+
+test('Renders the Home page correctly with output export and publish set to out', async ({
+  page,
+  ouputExportPublishOut,
+}) => {
+  const response = await page.goto(ouputExportPublishOut.url)
+  const headers = response?.headers() || {}
+
+  await expect(page).toHaveTitle('Simple Next App')
+
+  expect(headers['cache-status']).toBe('"Netlify Edge"; fwd=miss')
+
+  const h1 = page.locator('h1')
+  await expect(h1).toHaveText('Home')
+
+  await expectImageWasLoaded(page.locator('img'))
+})
+
+test('Renders the Home page correctly with output export and custom dist dir', async ({
+  page,
+  outputExportCustomDist,
+}) => {
+  const response = await page.goto(outputExportCustomDist.url)
+  const headers = response?.headers() || {}
+
+  await expect(page).toHaveTitle('Simple Next App')
+
+  expect(headers['cache-status']).toBe('"Netlify Edge"; fwd=miss')
+
+  const h1 = page.locator('h1')
+  await expect(h1).toHaveText('Home')
+
+  await expectImageWasLoaded(page.locator('img'))
+})

tests/e2e/simple-app.test.ts

@@ -25,20 +25,6 @@ test('Renders the Home page correctly', async ({ page, simple }) => {
   expect(body).toBe('{"words":"hello world"}')
 })
 
-test('Renders the Home page correctly with output export', async ({ page, outputExport }) => {
-  const response = await page.goto(outputExport.url)
-  const headers = response?.headers() || {}
-
-  await expect(page).toHaveTitle('Simple Next App')
-
-  expect(headers['cache-status']).toBe('"Netlify Edge"; fwd=miss')
-
-  const h1 = page.locator('h1')
-  await expect(h1).toHaveText('Home')
-
-  await expectImageWasLoaded(page.locator('img'))
-})
-
 test('Renders the Home page correctly with distDir', async ({ page, distDir }) => {
   await page.goto(distDir.url)
 

tests/fixtures/output-export-custom-dist/.gitignore

@@ -0,0 +1 @@
+custom-dist

tests/fixtures/output-export-custom-dist/app/layout.js

@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Simple Next App',
+  description: 'Description for Simple Next App',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

tests/fixtures/output-export-custom-dist/app/page.js

@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <main>
+      <h1>Home</h1>
+      <img src="/squirrel.jpg" alt="a cute squirrel" width="300px" />
+    </main>
+  )
+}

tests/fixtures/output-export-custom-dist/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  distDir: 'custom-dist',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+}
+
+module.exports = nextConfig